jqueryクリックtrクリックcheckboxを選択し、checkboxのデフォルトクリックイベントがブロックされる問題を解決
3022 ワード
1.1つ目、!$(event.target).is('input')は、トリガイベントの要素がinputであるか否かを判断する.イベントを使用します.thisではなくtargetは、イベント自体を取得し、イベントのバブルをトリガする問題を防止します.
$("#data_table tr").on("click",function (event) {
if (!$(event.target).is('input'))
{
$('input:checkbox', this).prop('checked', function (i, value) {
return !value;
});
}
})
注記:event.targetプロパティの役割は、出発イベントの要素を取得することです.インターネットでeventを使うと言っています.targetは、ieの下でバージョンの互換性の問題が発生する可能性があります.ie 11の下でテストしたところ、可能であることがわかりました.そのため、jQueryはそれをパッケージ化した後、W 3 C、IE、safariブラウザの異なる標準の違いを回避したはずです.互換性に問題がある場合は、次の方法を試してみます.
var thisEvent = window.event || event;
var targetEvent = thisEvent.srcElement;
if (!targetEvent) {
targetEvent = thisEvent.target;
}
2.2つ目は、checkboxが存在する列をスキップします.今回の例は第1列にあるので、第1のtd以外のtdバインドに選択イベントをクリックします.
//not(「td:first-child」)を直接使用するか、第1列のtdクラスを設定.tdcolFirst,すなわち.not(".tdcolFirst").効果は一致しています
$(".tr_check td").not("td:first-child").bind("click", function () {
$(this).parent().find("input:checkbox").prop('checked', function (i, value) {
return !value;
});
})
3.eventの下の部分でよく使われる属性または方法:
メソッド/プロパティ
を選択します.
さぎょう
event.preventDefault()
方法
デフォルトのイベント動作をブロックします.
event.stopPropagation()
方法
事件の泡を止める.
event.type
ツールバーの
現在のトリガーイベントのイベントタイプを返します.
event.target
ツールバーの
実行イベント「開始イベント」の要素を取得します.
event.relatedTarget
ツールバーの
トリガ時にイベントに関連する他のdom要素を返します.
event.pageX/event.pageY
ツールバーの
ページに対するカーソルのx座標とy座標を取得します.
event.which
ツールバーの
マウスでイベントをクリックし、マウスの左、中、右ボタンを取得し、キーボードイベントでキーボードがあるボタンを取得します.1マウス左ボタン2マウス中ボタン3マウス右ボタン
event.originalEvent
ツールバーの
元のイベントオブジェクトを指します.