webentwicklung-frage-antwort-db.com.de

jQuery bind click * ALLES * aber * ELEMENT *

Angenommen, es schweben einige Elemente herum, und ich versuche, einige zu tun, wenn ich auf ALLES klicke (divs, body, whatever ...), aber auf das angegebene Element (z. B. div # special).

Ich frage mich, ob es einen besseren Weg gibt, dies zu erreichen, als die folgende Methode, die ich mir vorstellen kann ...

$(document).bind('click', function(e) {
    get mouse position x, y
    get the element (div#special in this case) position x, y
    get the element width and height
    determine if the mouse is inside the element
    if(inside)
        do nothing
    else
        do something
});
66
railOne

Um mit der Situation "Mach das außer wenn das geklickt wird" umzugehen Die allgemeine Vorgehensweise besteht darin, dem document einen Ereignishandler hinzuzufügen, der den "do this" -Fall behandelt, und dann dem "except this" -Element einen weiteren Ereignishandler hinzuzufügen, der einfach verhindert, dass das click -Ereignis in den sprudelt document;

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

Siehe die event.stopPropagation() Dokumentation . Für diejenigen unter Ihnen, die frühere Versionen als jQuery 1.7 verwenden (wie es der Fall war, als diese Frage gestellt wurde), ist es nicht möglich, on() zu verwenden. stattdessen ersetzen Sie einfach die 2 Verwendungen von on() durch bind() ; Die Unterschrift ist in diesem Fall die gleiche.

Demo hier; http://jsfiddle.net/HBbVC/

113
Matt

Das könntest du auch tun

$(document).bind('click', function(e) {
  if(!$(e.target).is('#special')) {
    // do something
  }
});

oder wenn div # special untergeordnete Elemente hat, können Sie dies tun

$(document).bind('click', function(e) {
  if($(e.target).closest('#special').length === 0) {
    // do something
  }
});
43
bmavity

Ich habe es in der Vergangenheit so gemacht:

jQuery("body").bind("click", function(e)
{
    var obj = (e.target ? e.target : e.srcElement);
    if (obj.tagName != 'div' && obj.id != 'special')
    {
        // Perform your click action. 
        return false;
    }
});

Dies würde nur ausgeführt, wenn Sie nicht auf div # special klicken. Ehrlich gesagt gibt es vielleicht bessere Möglichkeiten, aber das hat bei mir funktioniert.

5
Dan Smith

sie müssen verschiedene Bindungen durchführen, es ist nicht erforderlich, alle diese Klicks in einer Funktion zu verarbeiten

$('body').bind('click', function(e){
  bodyClickEvent();
});
$('div.floating').bind('click',function(e){
  elementClickEvent(this);
  e.stopPropagation(); //prevents bodyClickEvent
});
  $('div#special').bind('click', function(){
  e.stopPropagation(); //prevents bodyClickEvent
});
1
El'

Ich schrieb dies heute für ein Problem, das ich hatte, weil ich es nicht mag, wenn Klickereignisse die ganze Zeit an das Dokument gebunden sind. In meinem Szenario funktioniert dies also mit Rückrufen von Funktionen.

$('#button').click(function(){
        //when the notification icon is clicked open the menu
        $('#menu').slideToggle('slow', function(){
            //then bind the close event to html so it closes when you mouse off it.
            $('html').bind('click', function(e){
                $('#menu').slideToggle('slow', function(){
                    //once html has been clicked and the menu has closed, unbind the html click so nothing else has to lag up
                    $('html').unbind('click');
                });
            });
            $('#menu').bind('click', function(e){
                //as when we click inside the menu it bubbles up and closes the menu when it hits html we have to stop the propagation while its open
                e.stopPropagation();
                //once propagation has been successful! and not letting the menu open/close we can unbind this as we dont need it!
                $('#menu').unbind('click');
            });
        });
    });
1
Owen