技术解析

如何移除一个元素所绑定的事件
0
2021-09-01 00:55:26
idczone

最近学校要求刷网课,用的超星学习通,就是那个鼠标一旦移出播放器就自动暂停播放的平台,我用着用着把那个事件监听器移除了(通过 chrome 的审查元素里面的 event listener 直接 remove ) test 但是当我想做成一句代码方便再 console 输入的时候(document.getelementsxxxxxx.removeEventListener),点开 properties 没办法找到 onmouseout 绑定的事件 test1 本来是打算直接用 removeEventListener 移除事件然后打包分发代码给同学,毕竟不是所有人都用 chrome,像 edge 的那个就连一键移除这个选项都没有


function removeEventListener(node) {
var parent = node.parentElement
var copy = node.cloneNode()
copy.innerHTML = node.innerHTML
parent.replaceChild(copy, node)
}
随便写了一个 性能没要求的话应该能用

正巧我几个月前也写了个超星的脚本,也考虑过这个问题,发现没有一个很好的解决方案,最后是监听播放器停止事件,然后进行播放。
代码你可以看一下 https://juszoe.github.io/erya/

另外由于那个事件是匿名函数,removeEventListener 是删不掉它的,希望有大佬能告知如何删除匿名函数

用 chrome https://stackoverflow.com/a/29561389/9278320
克隆 https://stackoverflow.com/a/34245613/9278320

貌似没有更好的方法了

你可以写个定时器,轮询 video.paused 状态,当 video 暂停时,通过 video.play()播放

https://developers.google.com/web/tools/chrome-devtools/console/utilities?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3/>getEventListeners(document);
```
貌似主流浏览器的调试工具都支持这个方法了

试试 pointer-events:none

github.com/bankroft/fefs,不能用稍微改改就行

是一个不错的思路,其实监听暂停这个比较现实,我尝试去用 remove event listener,由于是匿名函数每次执行都要事先展开 html 的播放器页面,让浏览器计算得出 mouseout 的监听事件,然后才能移除

chrome 那个试了一下,很艰难的成功了,不过还有一个难点,在运行 get eventlistener 之前必须手动展开一次 html 相关的播放器的代码,不然的话 get eventlistener 就没办法 get 到 mouseout,关于这一点 dalao 有没有什么好的解决方法吗
![avatar]( )

刚刚又挖了一下,我发现我的 event listener 是勾了 ancestors all,也就是说实际上 mouseout 并不是绑定在我认为的那个元素那里,我把 ancestors all 关掉,找出了他绑定元素的位置了,这样子直接用 remove 就 OK 了,谢谢

需要展开是因为嵌套在 iframe 里,展开一下 html 后 console 作用域自动帮你切换到那个 iframe 里,console 左上角能看见,用 window.iframe[''].document 就好了

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服