onClickOut (klicken Sie nach dem Verlassen des Elements)

Question

Das Problem war, dass ich eine "onClickOut" -Event benötigen.

Zum Beispiel: Sie haben eine DIV-Anzeige auf Schweben (onMouseOver) einige Schaltfläche oder was auch immer.

Wenn Sie außerhalb des Elements klicken, muss es ausgeblendet werden, aber wenn Sie $ ("body") sagen, klicken Sie auf und es wird auch ausgeblendet, wenn Sie auf das Element klicken. :/

Nun höre ich die Mausposition und wenn mouseleave() Ich setze eine Variable beim Klicken in mein Element. Im nächsten Schritt höre ich ein generelles click-event (body) aber ich frage ob die var gesetzt wurde. Wenn nicht, muss es ein Klick außerhalb meines Elements sein, damit ich mein Element ausblenden kann.

Ich hoffe, dass Sie es verwenden können:

$("#schnellsuche_box").mouseleave(function() { 
    var inside; 
    $("#schnellsuche_box").click(function() { 
     inside = true; 
    }); 
    $("body").click(function() { 
     if(!inside) { 
      $("#schnellsuche_box").hide(); 
     } 
    }); 
    delete inside; 
}); 

Answer 1

Sie tun, indem Sie auf Dokumentebene zu einem Klick zu hören, und in der Event-Handler Sie überprüfen, ob das angeklickte Element #schnellsuche_box oder ein beliebiges Element innerhalb #schnellsuche_box war closest() unter Verwendung, etwa so:

$(document).on('click', function(e) { 
    if (! $(e.target).closest('#schnellsuche_box').length) 
     $('#schnellsuche_box').hide(); 
}); 

FIDDLE

Answer 2

Sie müssen die #schnellsuche_box Click-Ereignis, um zu verhindern sprudeln bis zum body Click-Ereignis (das Standardereignis Propagation) von return false tun:

$("#schnellsuche_box").click(function() { 
    inside = true; 

    return false; 
}); 

Answer 3

Versuchen Sie dies:

$("body").click(function(e) { 
    var $target = $(e.target); 
    if (!$target.is('#schnellsuche_box') && 
     !$target.parents('#schnellsuche_box').length) { 
     alert('outside'); 
    } 
}); 

Answer 4

$("#schnellsuche_box").on("click",function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
});