0

我正在使用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>
4

2 回答 2

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/

于 2012-11-16T10:14:07.980 回答
1

我认为你需要的是：

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

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

如果您修复此问题以及我之前提到的标记错误，它应该可以正常工作。

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

于 2012-11-16T10:16:16.133 回答