美文网首页让前端飞Web前端之路
transitionend事件多次触发

transitionend事件多次触发

作者: 小光啊小光 | 来源:发表于2020-04-21 17:54 被阅读0次

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

  1. 只需要执行一次的情况
EL.ontransitionend = function(e){
    let ev = e || window.event
    if(ev.target===this){
      doSomething()
      this.ontransitionend = null // 即触发一次后解绑事件
    }
  }
  1. 但是,有时候你又想让他能多次触发,那怎么办???

办法:将以上代码用一个函数包裹。哪里需要触发就放哪里执行。

function handler(){
    EL.ontransitionend = function(e){
    let ev = e || window.event
    if(ev.target===this){
      doSomething()
      this.ontransitionend = null // 每次触发完后都解绑,除了避免如缩放导致触发,还不影响下次注册事件,虽然用ontransitonend是不会重复注册事件的,但这样写,我还是感觉要好一些。
    }
  }
}

相关文章

  • transitionend事件多次触发

    1. 原因: ​ 除了父元素自身可以触发自己的transitionend之外,其子元素如若有transitio...

  • transition 相关事件

    事件介绍 transition 相关事件有 4 个: transitionend: 过渡结束后触发 transit...

  • jquery中ajax触发两次事件解决办法

    ajax成功时,触发click事件,往往会触发多次解决办法:在触发click事件之前,先取消click事件,然后再...

  • 防抖和节流

    用户在操作事件的时候可能会手抖多次触发,比如一个提交事件触发多次向server端发送多次post或get请求,就要...

  • js中什么是防抖节流?

    防抖在连续触发的事件中,将多次执行的事件处理函数变为最后只执行一次。 Code 节流在连续触发的事件中,将多次执行...

  • 代码:JavaScript 监听 css3动画

    浏览器的CSS前缀。transitionend事件和animationend事件标准的浏览器事件,但在WebKit...

  • jquery中click点击一下触发两次的解决办法

    1.事件点击div触发两次事件办法 2.ajax时成功的触发click事件 如果多次ajax就会有多个事件存放,然...

  • jquery为什么要用bind和unbind?

    主要用于避免一个绑定事件提交多次 先解绑所有事件,再绑定事件 这样防止一个事件重复绑定多次造成多次触发

  • 防抖&节流

    防抖:让触发的多次事件只执行一次。使用场景:搜索框 节流:让触发的多次事件每隔一段时间执行一次。适用场景:拖拽事件...

  • uniapp: 防止按钮多次点击多次触发事件

    uniapp: 防止按钮多次点击多次触发事件 1、在根目录下新建 common 文件并创建 common.js ...

网友评论

    本文标题:transitionend事件多次触发

    本文链接:https://www.haomeiwen.com/subject/ypepihtx.html