Question

我正在尝试向所有对象添加事件侦听器，除了少数选中（所选对象也有任意级别的任意子元素）？

之前我曾问过这个问题，但我没有得到答案。我已接近解决它。你可以帮我调试一下吗？

我正在向名为bodylistener的body元素添加一个事件侦听器，并为名为selectedElementsMarkTrue的少数选定元素添加一个事件侦听器。我不想执行某些代码的少数选定元素，监听器selectedElementsMarkTrue使用bodylistener执行p setTimeout function。 selectedElementsMarkTrue将变量selectedElements设置为true，bodylistener在执行som代码之前检查selectedElements是否为true。我的代码仍有问题

    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);

我无法获取setTimeout函数来执行底层代码？

Answer 1

听起来你想要这样的行为：

<!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>

或者，你可以像纳伦建议的那样做：

<!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>

Answer 2

通过处理元素点击事件来阻止事件传播

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

将事件监听器添加到除选定的几个对象之外的所有对象？

2 个答案: