javascript - Add event listener to all objects except for a few selected? - Stack Overflow

admin管理员组

文章数量:1327813

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. selectedElementsMarkTrueset the variable selectedElements to true and bodylistenerchecks 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. selectedElementsMarkTrueset the variable selectedElements to true and bodylistenerchecks 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?

• javascript
• event-handling
• dom-events

Share Improve this question Follow edited Jul 9, 2022 at 9:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 12, 2011 at 9:27 einsteineinstein 13.9k2929 gold badges8686 silver badges110110 bronze badges 5

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Sounds 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