jqueryイベント実行検出 code_jquery-jsチュートリアル-php.cn

2 日前に都市検索を行うときに、入力フィールドのテキストが要件を満たさない場合は、ラベル プロンプトを使用します (ラベルが表示された後にクリックをドキュメントにバインドし、非表示にします)。クリック後のラベル) を入力して、列がフォーカスされます。このような小さな関数を 3 時間以上デバッグしたところ、ボタンのクリック イベントと入力が交互に複数回トリガーされる問題が発生したことがわかりました。この問題は、preventDefault() 関数と stopPropagation() 関数を追加した後に修正されました。問題は解決しましたが、イベントの実行順序を習得するのは非常に難しいため、ページイベントトリガーを自動的に記録できる簡単なイベント監視関数を作成しました。次のコードを参照してください(最初にjqueryを導入する必要があります!...)

コードをコピー コードは次のとおりです: //イベント実行監視 function eventsMonitor( op){ var defaultSetting = { eventsStr: "クリック フォーカス ブラー", splitStr: " ", css:{ "border":"1px 赤のソリッド", "z -index":9000000、 "背景":"白"、 "位置":"絶対"、 幅:400、 高さ:200、 "オーバーフロー-x" :"hidden", "overflow-y":"auto" } }; var ops = $.extend(true,defaultSetting,op); $ (' ').appendTo("body").css(ops.css); var $infolog = $ ("# DivForLogEvents div:eq(0)"); $.each(ops.eventsStr.split(ops.splitStr),function(i,v){ if(v != 'resize') $("*:not('#DivForLogEvents')").bind(v, function(e){ if(!$(e.target).is("#DivForLogEvents") && !$ (e.target).is($infolog)){ $infolog.append((e.target.nodeName||" ") "->" (e.target.id||e.target.Name ||" ") " " v " イベント! "); $("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height()},300) ; } }); else $(window).bind('resize', function(e){ if(!$(e.target).is(" #DivForLogEvents" ) && !$(e.target).is($infolog)){ $infolog.append((e.target.nodeName||" ") "->" (e.target.id ||e .target.Name||" ") " " v " イベント! "); $("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog. height() },300); } }) }

メソッドの呼び出し例

コードをコピー コードは次のとおりです: &lt ;head> 無題のドキュメント /script>

$(document).ready(function(){ eventsMonitor({ css:{top:0, right:20}, eventsStr:"クリックぼかしフォーカス選択スクロールマウスホイールサイズ変更" });

$("#info").click(function(){$(this). text($("#DivForLogEvents" ).outerHeight());});

こんにちは " id="name" value= "テスト" /> ffffffff

エフェクトのスクリーンショット