jquery 事件绑定很好用,
不过处理事件冒泡、后续事件执行逻辑很是纠结。
总结已知的逻辑如下。
jquery 的事件提供以下方法处理相关逻辑:
1. ev.preventDefault -> 阻止浏览器绑定到当前 node 的默认行为,比如 a 链接的 click 事件默认会跳转
2. ev.stopPropagation -> 阻止冒泡,即当前 node 的 parentNode s 绑定的同类型事件不会被触发
3. ev.stopImmediatePropagation -> 阻止当前 node 同事件类型 后续函数的触发,会自动调用 ev.stopPropagation() ,
比如给 #a 绑定了 5 个 click ,当第 2 个函数调用了 ev.stopImmediatePropagation() 以后,后面的 3 个函数都不会被调用,
并且这个 click 事件也不会再冒泡了。
如果只想阻止后续函数的触发而不阻止冒泡(假如有这需求呢),那么可以设置
ev.isImmediatePropagationStopped = function () {return true;}; 即可。
4. return false -> 如果事件处理函数返回 false ,那么 jquery 会自动调用 ev.stopPropagation() 和 ev.preventDefault() ;
但是后续函数会继续执行 :(
以上描述在正常的 .bind .click 等方法中正常,在 .live 和 .delegate 稍有不同
1. 在 .live 的事件处理函数中 return false ,行为不仅仅是上面描述的,还会产生类似 ev.stopImmediatePropagation() 的效果,
即后续的 live 事件都不执行了;
2. 在 .live 的事件处理函数中想阻止后续函数的执行,只能 return false ;
但是这样有个副作用就是 jquery 会自动调用 ev.stopPropagation() 和 ev.preventDefault() ,这个行为没法改变!!!!
纠结的事情啊
望同样纠结、研究过的一起探讨
参考:
1 comment:
我的理解,一个是预绑定,一个是即时绑定
Post a Comment