0

タグmaskedで呼び出されるカスタムクラスがあります。bodyページの中央に、ページのDIV幅と高さが約50％のがあります。

クリックハンドラーをセレクターにのみアタッチしようとしていますbody.maskedが、問題は、内部DIVがクリックされるたびに、そのbody.maskedセレクターのクリックハンドラーも起動されることです。

DIV真ん中が「透明」であるかのように。どうすればそれを回避できますか？

ここにいくつかのコードがあります：

$('body.masked').click(function(){
  alert();
})

そしてHTML：

<body class="masked">
  <div style="width:50%;height:50%;text-align:center;>Lorem ipsum</div>
</div>
4

1 に答える 1

2

イベントバブリングによるものです。

子要素で発生したイベントをイベントツリーの一番上にバブルさせます。それが起こっている理由です。

イベントハンドラーでは、e.target値をチェックして、イベントが発生した場所をチェックできます。

元：

$('.top').on('click', function(e){
    console.log(e, e.currentTarget, e.target, this);
    if($(e.target).is(this)){
        console.log('proceed')
    }
})

フィドル

于 2013-01-22T12:34:24.680 に答える