1. 原因:
除了父元素自身可以触发自己的transitionend
之外,其子元素如若有transition发生,同样会触发父元素的transitionend
事件。
2. 解决办法
EL.ontransitionend = function(e){
let ev = e || window.event
if(ev.target===this){ // 判断是不是自身触发的,不是则不行什么
doSomething()
}
}
3. 当用鼠标滚轮缩放页面时,因为我的项目中transition的时width,因为缩放改变了元素的宽度,故同样触发,而且此时ev.target就是它本身this
- 只需要执行一次的情况
EL.ontransitionend = function(e){
let ev = e || window.event
if(ev.target===this){
doSomething()
this.ontransitionend = null // 即触发一次后解绑事件
}
}
- 但是,有时候你又想让他能多次触发,那怎么办???
办法:将以上代码用一个函数包裹。哪里需要触发就放哪里执行。
function handler(){
EL.ontransitionend = function(e){
let ev = e || window.event
if(ev.target===this){
doSomething()
this.ontransitionend = null // 每次触发完后都解绑,除了避免如缩放导致触发,还不影响下次注册事件,虽然用ontransitonend是不会重复注册事件的,但这样写,我还是感觉要好一些。
}
}
}
网友评论