transitionend事件多次触发
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是不会重复注册事件的，但这样写，我还是感觉要好一些。
}
}
}
发表评论 (审核通过后显示评论)：