admin管理员组文章数量:1327660
I'm trying to add event listener to all objects except for a few selected (the selected also have arbitrary child elements in arbitrary levels)?
I have asked this question before, but I didn't really got an answer to it. I have came close to solve it. Could you please help me with debugging it?
I'm adding an event listener to the body element called bodylistener
and an event listener to the few selected elements called selectedElementsMarkTrue
. The few selected elements that I don't want to execute some code, the listener selectedElementsMarkTrue
performs prior to bodylistener
with setTimeout function
. selectedElementsMarkTrue
set the variable selectedElements
to true
and bodylistener
checks if selectedElements
is true
before execute some code. There is still 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);
I can't get the setTimeout
function to execute the underlying code?
I'm trying to add event listener to all objects except for a few selected (the selected also have arbitrary child elements in arbitrary levels)?
I have asked this question before, but I didn't really got an answer to it. I have came close to solve it. Could you please help me with debugging it?
I'm adding an event listener to the body element called bodylistener
and an event listener to the few selected elements called selectedElementsMarkTrue
. The few selected elements that I don't want to execute some code, the listener selectedElementsMarkTrue
performs prior to bodylistener
with setTimeout function
. selectedElementsMarkTrue
set the variable selectedElements
to true
and bodylistener
checks if selectedElements
is true
before execute some code. There is still 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);
I can't get the setTimeout
function to execute the underlying code?
- I will flag my my other question, which is similar to this question after solving this question – einstein Commented Apr 12, 2011 at 9:31
- Please vote this question up. If you think it is important to know. – einstein Commented Apr 12, 2011 at 10:03
- 2 you can stop event propagation for which you don't want to trigger parent's click event. – Naren Sisodiya Commented Apr 12, 2011 at 11:12
- $('#dontAddEventListener1, #dontAddEventListener2').click( function(event){ event.preventDefault(); return false; }); – Naren Sisodiya Commented Apr 12, 2011 at 12:33
- @NarenSisodiya You should add that to your answer, it solved my issue. – Hashim Aziz Commented Nov 13, 2023 at 1:00
2 Answers
Reset to default 5Sounds like you want behavior 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 it 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>
prevent event propagation by handling elements click event
$('#dontAddEventListener1, #dontAddEventListener2').click( function(event){ event.preventDefault(); return false; });
本文标签: javascriptAdd event listener to all objects except for a few selectedStack Overflow
版权声明:本文标题:javascript - Add event listener to all objects except for a few selected? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742228085a2436701.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论