3

私が書いていない Web ページをデバッグしようとしています。クリックすると JavaScript コマンドを実行するボタンがありますが、その機能をクリック イベントに割り当てた .onClick または .click コマンドを含む JavaScript コードがどこにあるのかわかりません。ボタンのコードは次のとおりです。

<li><a href="#top" class="page-link btn-custom btn-sign-up-bottom"></a></li>

Chrome 開発ツールを使用して要素タブの下を見ることができることは知っています->イベントリスナー->クリックすると、クリックすると実行される関数が表示されますが、リスナーが設定されているコード行を見つけたいです。ボタンが含まれる 3 つのクラスのいずれかを使用してリスナーが割り当てられているか、すべてのリンクがこの onClick に割り当てられている可能性があるため、注意が必要です。私はこれをたくさんしなければならないと思うので、効率的な解決策があることを願っています.

4

2 に答える 2

0

このようにChromeコンソールを使用してonclickハンドラーをアタッチし、デバッガーを呼び出すことができるかもしれません

$('.btn-sign-up-bottom').click(function(){
   debugger;
});

Javascript の実行が中断され、F10 または F11 を押し続けてステップを実行すると、元のイベント ハンドラー関数にステップ実行される可能性があります。

于 2012-08-18T22:17:30.390 に答える
0

行を見つける方法はわかりませんが、次のコードを使用すると、どの関数がイベントを追加したかを見つけることができます。

最初に要素に id を追加します。myid

要素の直後に次のスクリプトを追加します。

var el=document.getElementById('myid');
el.oldAddEvent=el.addEventListener;
el.addEventListener=function f(a,b,c){
    if(a=='click'){
        alert((f.caller?f.caller+"\n\n":"Window ")+"has added a click event to\n\n"+b+"\n\nwith eventCapture="+(c?true:false));
    }
    el.oldAddEvent(a,b,c);
}

では、こんな台本があれば…

<script>
el.addEventListener('click',f,false);
</script>

...警告します

Window has added a click event to

function f() {
    alert("click");
}

with eventCapture=false

そしてこれで…

function g(){
el.addEventListener('click',f,false);
}
g();

...警告します

function g() {
    el.addEventListener("click", f, false);
}

has added a click event to

function f() {
    alert("click");
}

with eventCapture=false
于 2012-08-18T23:03:51.850 に答える