使用addEventListener在函数体外绑定的函数，在函数体内无法取消绑定
项目的需求是给五个元素先添加一个动画，在动画执行完成后再给五个元素添加另外一个动画。元素以数组的形式保存在了arr中，实际在执行的过程中发现section.removeEventListener("animationend",down.bind(this,arr,section),false)
这一句没有正常生效，在for循环执行完成后，会反复再次执行down(arr,section)这个方法。中间插入clear（）这个方法的执行结果。判断是在section这个元素上“animationend”执行完成后，同时绑定了down（）和clear（）两个方法的原因导致的。现在问题就是不理解为什么removerEventListener（）这个方法会不生效
// 给元素的父级元素添加监听animationend事件，避免元素结束动画时间不一致导致重复执行事件 // 使用bind方法绑定执行环境且传递两个数组和父元素 section.addEventListener("animationend",down.bind(this,arr,section),false) // var bb=down.bind(this,arr,section,bb) // 定义方法，在上升动画执行完毕后触发。 function down(arr,section){ // console.log(le) console.log(section) // 删除父级元素中绑定的动画结束后执行的方法 section.removeEventListener("animationend",down.bind(this,arr,section),false) // var kk=down.bind(this,arr,section,bb) // var le=arr // console.log(kk==bb) // 遍历数组，为元素绑定下降的动画 console.log(arr[1].style.animationName) for(var j=0;j |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
|
我分享下我自己研究的结果吧。虽然animationend这个事件在父级绑定的，但不同的子元素都绑定了动画，这个事件依然会触发五次。不知道这算不算是一个无解的问题，最后我放弃这个思路了。 |
|
|
|
|
|
|
|
|
天盟APP下载
