stopPropagation阻止冒泡调试方法

原创 Dean 博文,工作笔记 二维码阅读
2017-12-25 15:01

开发中,我们经常需要往window或者document上动态绑定事件,比如做元素的移动之类的,而且我们会经常遇到一些奇奇怪怪的问题,比如释放鼠标后,随意移动鼠标元素还是还是会移动,经过检查,我们会发现原因是mouseup的时候我们动态绑定的mouseup事件,没有接收到事件,导致没有正确的重置我们用于移动的一些状态,根源找到了,解决方案是很简单的,该冒泡的时候正常冒泡就好了,但是寻找阻止掉冒泡的地方并修正的过程却是也许简单也许复杂。

为什么这样说呢?

对于小项目,很轻松的就可以找到对应的地方进行修正。

但是对于一个稍大一点的项目来说,代码动辄几万行,事件处理的地方多了去了,要寻找究竟是哪一个错误的阻止了冒泡的进行,如果没有找对方法,那完全就是一场噩梦。

我们知道事件执行过程中的event对象是从window上的Events对象继承而来的,而且阻止冒泡stopPropagation是一个事件共有的行为,那么该事件在Events的原型函数里面肯定有声明,我们要做的只需要重写一下这个函数就好了,接下来就比较简单了,我们可以通过console.trace来追踪发起源,这里需要注意的是我们不能直接重写原型链上的方法,执行会报错,但是我们可以在其原型链上添加一个自定义方法,然后临时将所有的stopPropagation改成我们定义的方法就好了,代码如下:

Event.prototype.stopProp = function() {
	this.stopPropagation();
	console.trace();
}

这样,我们只需要将stopPropagation调用的地方改成我们上面的方法就好了。

当然这只是其中一种办法,我相信一定还有更好的办法,有谁知道的记得分享一下。

本文地址:https://www.deanhan.cn/debug-stoppropagation.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信