Stop Propagation auf anderen Element

Question

Ich versuche zu bestimmen, wie Click-Ereignisse (oder Propagierung?) Von einem anderen Element vorübergehend deaktivieren. Wenn Sie also auf ein Ereignis für ein bestimmtes Element klicken, wird kein Klickereignis für ein Element mehr ausgelöst.

Simplified Example: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div id="World">World</div> 
<div id="Hello">Hello</div> 

    <script> 
    $(document).mousedown(function (e){ 
     if($('.there').length){ 
      $('.there').remove(); 
      console.log('removed there'); 
      //here is where I would need the '#World' click event to not fire 
     } 
    }); 

    $(document).on('click','#World',function(){ 
     console.log('World'); 
    }); 
    $(document).on('click','#Hello',function(){ 
     console.log('Hello'); 
     $(this).append('<div class="there">there</div>'); 
     console.log('added there'); 
    }); 
    </script> 

Answer 1

Ein Ereignis wird von einem Element ausgelöst ... Oder eine Sammlung von Elementen, die Sie angeben.
Und alle ihre Kinder.

Events happen is this order:

1. mousedown-
2. mouseup
3. klicken

«wenn Sie auf eine Veranstaltung zu einem bestimmten Element auf mousedown- klicken»
        würde wirklich einen anderen Weg brauchen, um es zu erklären ...

Aber ich denke, ich antwortete.

CodePen:

$(document).on("mousedown",function(){ 
    console.log("mousedown"); 
}); 

$(document).on("click",function(){ 
    console.log("click"); 
}); 

$(document).on("mouseup",function(){ 
    console.log("mouseup"); 
}); 

//---- 

$(document).find("#main").on("mousedown click mouseup",function(e){ 
    e.stopPropagation(); 
    console.log("NOTHING...."); 
}); 

$(document).find("#okay input").on("mousedown click mouseup",function(e){ 
    e.stopPropagation(); 
    console.log("Just the OKAY"); 
}); 

einfach überall klicken, während Konsole zu überprüfen.

Ein aufmerksames Auge wird sehen, wie die Vererbung deaktiviert wird.
Und wie es "bläst".

Answer 2

Ich habe gesehen, Entwickler entfernen die Ereignisse aus dem zweiten Element vorübergehend, und fügen sie dann bei Bedarf zurück, aber ich finde die beste Methode für die vorübergehende Deaktivierung eines bestimmten Ereignisses ist Code zum Ereignishandler hinzufügen, die für einige überprüft Art der Statusvariable oder Klasse. Ich fühle mich wie ich formuliert, dass schlecht, so ist hier ein kurzes Beispiel:

var buttonsToDisable = $('.mybuttons'), 
    disablerButton = $('#disabler'); 

buttonsToDisable.on('click',function(e) { 
    var ele = $(this); 
    if(!ele.is('.disable-click')) { 
     // some event handler logic here 
    }; 
}); 

// Toggle click-events on all buttons with the .mybuttons class when clicked 
disablerButton.on('click',function(e) { 
    if(!buttonsToDisable.is('.disable-click')) { 
     buttonsToDisable.addClass('disable-click'); 
    } else { 
     buttonsToDisable.removeClass('disable-click'); 
    }; 
}); 

Wenn Sie auch die Ausbreitung der mybuttons Ereignisse stoppen wollte, dann fügen Sie einfach einen else zu dieser if Aussage und dort die stopPropagation() Funktion Veranstaltung rufen .

Answer 3

Da #World Kinder von Eltern ist, dann, wenn Sie auf #World zuerst klicken, wird sein Klick-Ereignis ausgelöst, dann Eltern (div, Körper etc), dann html.

Wenn Sie die Weitergabe in # World stoppen, wird das Ereignis click für Eltern nicht einmal für ein einzelnes Ereignis ausgelöst.

Ich denke, dass Sie überprüfen müssen, ob es eine Menge gibt, die verfügbar ist, wenn Sie auf #World klicken. d.h.

$(document).on('click','#World',function(){ 
    if ($('.there').length) { 
     return; // or return false; 
    } 

    else { 
     //code you want to execute 
     console.log('World'); 
    } 
});