All geek questions in one place

Add event listener to all objects except a few selected ones?

Am I trying to add an event listener to all objects except a few selected ones (the selected ones also have arbitrary children at arbitrary levels)?

I asked this question before, but in fact I did not get an answer to it. I came up to solve this problem. Could you help me debug it?

I add an event listener to the body element called bodylistener , and an event listener for several selected elements called selectedElementsMarkTrue . A few selected elements that I do not want to execute any code, the selectedElementsMarkTrue listener pior to the bodylistener using the setTimeout function . selectedElementsMarkTrue set the selectedElementsMarkTrue variable to true and the bodylistener checks to see if selectedElements true before executing the som code. There is something wrong with my code.

  var selectedElements = false; var bodylistener = function(){ window.setTimeout(function(){//Setting timeout so that the other handler, selectedElementsMarkTrue, always performs first (function(){ if(selectedElements == false){ //Do some stuff }else{ selectedElements = false; } }); }, 10);//Could be 0, but te be sure I set 10 }; var selectedElementsMarkTrue = function(){ selectedElements = true; }; $('#dontAddEventListener1, #dontAddEventListener2').each(function(){ this.addEventListener('click', selectedElementsMarkTrue, false); }); document.body.addEventListener('click', bodylistener, false);

Can't I get the setTimeout function to execute base code?

+6
source share
2 answers

It looks like you want the behavior to be something like this:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.addEventListener("DOMContentLoaded", function() { document.body.addEventListener("click", function(e) { var el = e.target; do { if (el.hasAttribute && el.hasAttribute("data-nofire")) { return; } } while (el = el.parentNode); alert('do stuff'); }, true); }, false); </script> </head> <body> <p><span>click me</span></p> <p data-nofire><span>click me</span></p> <p data-nofire>click me</p> <p>click me</p> </body> </html>

Or, you could do something like Naren suggested:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.addEventListener("DOMContentLoaded", function() { var nofire = document.getElementsByClassName("nofire"); for (var i = 0; i < nofire.length; ++i) { nofire[i].addEventListener("click", function(e) { e.stopPropagation(); }, true); } document.body.addEventListener("click", function(e) { alert('do stuff'); }, false); }, false); </script> </head> <body> <p><span>click me</span></p> <p class="nofire"><span>click me</span></p> <p class="nofire">click me</p> <p>click me</p> </body> </html>
+5
source

prevent event propagation by handling click event elements

 $('#dontAddEventListener1, #dontAddEventListener2').click( function(event){ event.preventDefault(); return false; });
0
source

Source: https://habr.com/ru/post/885712/

More articles:


All Articles