Question

我正在使用on处理程序注册到'body'元素的寄存器，并在每个元素不在特定div中时触发事件。因此我使用not选择器来过滤掉所有这些元素。但是，如果我单击该元素，则会触发该事件两次，而不是一次。

我误解了不是选择器吗？

小提琴示例：http://fiddle.jshell.net/kHbH9/

示例代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $('body').on('click', ':not(#toolbar)', function(){
                    $('body').append('clicked<br/>')
                });
            });

        </script>
    </head>
    <body>
        <div id"toolbar">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h1>Click here</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </body>
</html>

Answer 1

罪魁祸首是id"toolbar"，应该是id="toolbar"。您可以使用stopPrapagation方法阻止事件冒泡。

$(function() {
    $('body').on('click', function() {
         $('body').append('clicked<br/>')
    });
    $('#toolbar').click(function(e) {
        e.stopPropagation()
    })
});

http://fiddle.jshell.net/PHkbR/

Answer 2

我认为你需要的是：

$(function() {
    $('body').on('click', ':not(#toolbar, #toolbar *)', function(){
        $('body').append('clicked'+this.nodeName+"<br/>");
    });
});

问题是工具栏元素上没有触发处理程序，但是在其所有子元素（即段落）上触发。您需要排除选择器中的所有后代，这可以通过为:not子句添加后代选择器来实现。

如果您解决了这个问题，以及我之前提到的标记错误，它应该可以正常工作。

http://fiddle.jshell.net/kHbH9/2/

与not selector一起使用时，jQuery on调用了两次

2 个答案: