JQuery .click - div内の特定の要素を除外します。

Question

.clickは何もしません。ユーザーがdiv内の<p>text</p>をクリックすると、div .clickが機能します。

HTML：

<div> 
    <span>yes</span> 
    <p>text</p> 
</div> 

のjQuery：

<script> 
$(document).ready(function() { 

    $("div").click(function() { 

     alert("woohoo!"); 

    }); 

}); 
</script> 

Answer 1

$("div").click(function(e) { 
     if($(e.target).is('p')){ 
      e.preventDefault(); 
      return; 
     } 
     alert("woohoo!"); 
    }); 

クリックのターゲットを確認してください。この方法では、別のイベントをバインドする必要はありません。

Answer 2

$("div > span").click(function() { 

    alert("woohoo!"); 

}); 

しかし、html要素にIDを提供する方がよいでしょう。

Answer 3

<script> 
$(document).ready(function() { 
    $("div :not(p)").click(function(event) { 
     alert("woohoo!"); 
    }); 
}); 
</script> 

これは、<div>コンテナの子としてテキストノードを気にしないことを意味します。