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
ツールバーの
元のイベントオブジェクトを指します.