0

onハンドラーを使用して、'body'要素のレジスターに登録し、特定のdivにない要素が発生するたびにイベントを発生させています。そのため、notセレクターを使用して、これらすべての要素を除外しています。ただし、要素をクリックすると、イベントは1回ではなく2回発生します。

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 に答える