jquery - 指定エリアのクリックを検出

Question

<div id="main">
hello world
<div id="second-div">
bye
</div>
</div>

jQuery('#main:not(second-div)').click(function() {
alert('works!');
});

「メイン」div でのマウスクリックを検出したいのですが、「2 番目の div」div をクリックしてもクリックイベントはトリガーされません。「:not(second-div)」を使用してみましたが、とにかくクリックがトリガーされます。

score 3 · Accepted Answer

イベントの対象プロパティを確認できます。（コメントからの改善提案を反映するように編集）

jQuery('#main').click(function(e) {
    if(e.target===this) {
        alert("works!");
    }
});

http://jsfiddle.net/rZeXa/

score 2 · Accepted Answer

私はこれが変だと知っています。

$(document).ready(function(){
       $(this).click(function(e){
            if($(e.originalEvent.originalTarget).prop('id')=='main'){  
              alert('You have clicked on Main') 
            }
   })                       
 });

今日学んだことを共有したかっただけです。

score 2 · Accepted Answer

ダニエルによって提供されたもののような同様の解決策。私はいつもisこのように識別するために使用します：

jQuery('#main').click(function(event) {
  if(!$(event.target).is('#second-div'))
   {
     alert('works');
   }
});

score 2 · Accepted Answer

または、これを試すこともできます: http://jsfiddle.net/N6G62/

これは原因を助けるはずです:)

コード

$('#main').click(function(e) {

    alert('works!');

});


$('#main div').click(function(e) {
     e.stopPropagation();
});

score -1 · Accepted Answer

あなたは電話するべきです

    event.stopPropagation();

クリックハンドラーの最初の行に。これにより、階層内のイベントの伝播が停止します。

jquery - 指定エリアのクリックを検出

5 に答える 5

Related

Reference