0

div内にチェックボックスがあるdivがあります：

<div class="study-box set-box">
    <span class="set-box-title"><i class="icon-th-list icon-white"></i>test set</span>
    <input class="study-box-checkbox" type="checkbox" />
</div>

div 全体をクリック可能にしたいので、onClick() イベントを実行できます。ただし、チェックボックスがクリックされたときにこのイベントが呼び出されることは望ましくありません。チェックボックスの左と下にいくつかの領域を追加し、それらの領域にイベントをバインドすることを考えていますが、これはハックのようです。考え？

サンプル ボックス/チェックボックスを含む JSFiddle:

http://jsfiddle.net/PTSkR/59/

4

4 に答える 4

2

入力がクリックされたときにイベントの伝播を停止します。

$(".study-box").on("click", function () {
    console.log("clicked");
});
$("input").on("click", function (e) {
    e.stopPropagation();
});

http://jsfiddle.net/PTSkR/60/

于 2013-05-20T02:14:40.840 に答える
1

簡単な解決策は、ラッパーを作成してそれを position: relative に設定し (position: relative を調査ボックスから削除する)、チェックボックスを調査ボックスの外に移動することです。同じように配置されますが、スタディ ボックスにカーソルを合わせてクリックしても影響を受けません。

于 2013-05-20T02:17:23.517 に答える
0

クリック イベントが発生したら、ターゲットを確認します。

$(document).ready(function () {
$('div.study-box').click(function (e) {
   console.log(e.target.tagName);     
    if(e.target.tagName == 'DIV'){
        // do something
    } else {
        // don't
    }
});
});
于 2013-05-20T02:18:06.890 に答える