jquery - Jqueryクリックインli

Question

私のhtmlは次のように設定されています：

<li>
    Header
    <button>Edit</button>
</li>

そして、liをクリックして1つのアクションを実行し、ボタンをクリックして別のアクションを実行する方法があるかどうか疑問に思いました。現在、liにjqueryクリック要素がある場合、ボタンを押すと起動します。HTML構造を変更せずにこれを分離する方法はありますか？

Answer 1

ボタンクリックイベントハンドラー内でevent.stopPropagation（）を使用します-これにより、イベントがバブリングするのを防ぎます。li

button.click(function(event){
      event.stopPropagation();
});

Answer 2

はい、ボタンのハンドラーでevent.stopPropagationを使用できます。

$(document).ready(function() {
    $('li').click(function() {
        alert('li clicked');
    });

    $('button').click(function(event) {
        event.stopPropagation();
        alert('button clicked');
    });
});​

デモ：jsfiddle

Answer 3

もご利用いただけますevent target。

$('li').click(function(event) {
      var $tgt=$(event.target);
       if( $tgt.is('button') ){
          alert('button clicked');
       }else{
          alert('li clicked');
       }
});