移除另一个脚本设置的点击事件监听器

Posted

技术标签:

【中文标题】移除另一个脚本设置的点击事件监听器【英文标题】:Remove click event listener set by another script 【发布时间】:2016-11-01 12:17:11 【问题描述】:

通过 Chrome 开发者工具,我找到了一个我想删除的点击事件监听器:

如果我使用开发人员工具删除侦听器,它就可以工作。现在我发现监听器是通过 jQuery 添加的:

$(".js_playerlist").on("click",".playerlist_item",function()
    var a=$(this).hasClass("nothingThere");
    if(!a)  
        var d=$(this).data("msgid");
        if(d)  
            b.loadChatLogWithPlayer(this,d)
         else 
            b.loadChatLogWithPlayer(this)
        
    
);

如何通过 javascript不使用 jQuery 删除此事件侦听器?

【问题讨论】:

您可以访问 jQuery,因为处理程序是使用它设置的,那么您为什么不想使用 jQuery? 因为它是我正在编写的 Chrome/Firefox 扩展,所以我不能从网站本身进行 jQuery,可以吗? 只要你等到 jQuery 被加载,我不明白为什么不这样做。有许多扩展在加载页面的上下文中起作用,所以这似乎是可能的。 【参考方案1】:

您必须使用 jQuery 函数来执行此操作,因为事件是由 jquery 附加的,因此请使用 unbind()off() 这两个函数删除事件: p>

$(".js_playerlist").delay(1000).off("click",".playerlist_item");
//OR
$(".js_playerlist").delay(1000).unbind( "click.playerlist_item" );

您可以使用 javascript 方法 removeEventListener() 但您必须将要删除的函数作为参数传递,并且脚本在您的情况下附加事件的方式可以避免这种情况。 希望这会有所帮助。

【讨论】:

.off().unbind() 都不起作用。点击事件仍然触发。有什么想法吗? 没关系,似乎在我使用.off() 后附加了事件侦听器。所以我必须在元素完全加载并附加所有侦听器后运行它。 这不起作用。如果我打开页面并在 javascript 控制台中输入您的代码,它就可以工作。但是执行扩展中的代码不会。我什至尝试创建一个脚本 DOM 元素并将代码放在那里。代码已执行,但没有发生任何事情。 我现在通过将代码放入脚本 DOM 元素并使用 window.setTimeout 执行它来解决它。感谢您的帮助,非常感谢。【参考方案2】:

我猜你可以使用

document.getElementsByClassName("js_playerlist")[0].removeEventListener("click", attachedFunction);

在这种情况下,attachedFunction 是事件触发时要调用的附加函数。在你的情况下:

function()
    var a=$(this).hasClass("nothingThere");
    if(!a)  
        var d=$(this).data("msgid");
        if(d)  
            b.loadChatLogWithPlayer(this,d)
         else 
            b.loadChatLogWithPlayer(this)
        
    

可能,如果您可以访问代码,提取函数并将其分配给变量,代码会更简洁。

如果其他脚本不在您的权限范围内,为了100%易于维护,我建议您发送对其他脚本代码的请求并对其进行解析以获得所需的功能,这样您将拥有一直都是最新版本。

【讨论】:

以上是关于移除另一个脚本设置的点击事件监听器的主要内容,如果未能解决你的问题,请参考以下文章

怎样理解js中的事件监听

怎么移除地图监听事件

js中监听iframe点击事件

从点击事件中移除一个函数

vue 监听函数发生事件

Egret事件机制