Question

我正在尝试调试我没写过的网页。当我点击它时，有一个按钮运行JavaScript命令，但我无法弄清楚JavaScript代码在哪里包含.onClick或.click命令，该命令将该功能分配给click事件。这是按钮的代码：

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

我知道我可以使用Chrome开发工具并查看元素标签 - >事件监听器 - ＆gt;单击以显示单击它时运行的函数，但我想找到监听器所在的代码行已成立。这很棘手，因为可以使用按钮所属的三个类中的任何一个来分配侦听器，或者可能是所有链接都是在onClick上分配的。我怀疑我必须做很多事，所以我希望有一个有效的解决方案。

Answer 1

也许您可以使用Chrome控制台附加一个onclick处理程序，并调用debugger

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

Javascript执行会中断，然后你可以继续按F10或F11步骤..看看它是怎么回事......也许你会步入原始的事件处理函数！

Answer 2

我不知道如何找到该行，但是使用以下代码可以找到添加了该事件的函数。

首先在元素中添加一个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

查找为节点分配onclick事件的代码

2 个答案: