javascript - 子要素ではなくクリックを処理する方法は?

Question

次のコードでクリックを処理します。

入力のあるテーブル

<table>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
    </tr>
</table>​

クリックハンドラ

$('table tr').click(function(){
    alert('clicked');
});​

http://jsfiddle.net/n96eW/

うまく機能していますが、td にチェックボックスがある場合は、クリックしたときにも処理されます。

TRのクリックを処理する方法はありますが、子要素ではトリガーされませんか?

Answer 1

http://jsfiddle.net/n96eW/1/

チェックボックスに別のイベント ハンドラーを追加して、stopPropagation を実行します。

$('table tr').click(function(){
    alert('clicked');
});

$('table tr input').click(function(e) {
    e.stopPropagation();
});
​

Answer 2

event.targetイベントをフィルタリングするために確認できます。

$('table tr').click(function(e){
    if(e.target.tagName.toLowerCase() != "input") {
        alert('clicked');
    }
});​

Answer 3

使用することもできます

$("tr").on('click',function() {

  if (!$(event.target).is('input'))
    alert('clicked');

});