美文网首页
对全局事件的解绑

对全局事件的解绑

作者: 悄敲 | 来源:发表于2019-03-01 22:12 被阅读0次

问题的产生:在详情页面,我们对拖动页面绑定了scroll事件,实现对header区域的渐隐渐现效果,如图1。不过这个事件是绑定在全局window对象上的。这意味着,尽管我们是在detail/header子组件上绑定的事件,但其他组件也会受到影响。

图1 在详情页面拖动页面时header区域动画
当我们离开详情页面,在主页面拖动时,会发现,在detail/header子组件上绑定的事件依然被触发并执行了相关代码(证据是:控制台打印出来的内容,是在detail/header子组件中对scroll事件触发时,执行的回调函数handleScroll中设置的)。
图2 在主页面拖动时的情况
在子组件的具体元素上绑定的事件,就只在该元素上生效,例如对div1绑定了一个点击事件,那么只有在点击该div时,才会执行handleClick。但全局事件的绑定,影响却是全局的,这就经常造成bug。
<div id="div1" @click="handleClick">
</div>

解决:在退出绑定了全局事件的页面时,对其中的全局事件进行解绑。
由于在项目的App.vue使用了keep-alive,会多出两个生命周期钩子函数 activateddeactivated,前者只要页面一被展示,就会执行;后者只要页面即将被隐藏或替换成新页面,就会执行。在这两个钩子函数中分别完成对全局事件的绑定和解绑。

图3 全局事件的绑定与解绑
这里之所以对window全局对象绑定了事件,是因为页面上的scroll操作的有效区域是在整个页面上,而不是某个局部dom元素上。解除绑定后,在其他页面进行scroll,就不会出现类似在详情页面scroll的效果了。

相关文章

  • 对全局事件的解绑

    问题的产生:在详情页面,我们对拖动页面绑定了scroll事件,实现对header区域的渐隐渐现效果,如图1。不过这...

  • 全局事件的解绑

    如果不进行解绑,那么就会在所有页面生效这个事件。因为他是绑定在window对象上的,所以相当于全局事件

  • 【Vue23】对全局事件的解绑

    这块内容很重要!!!很多初学者因为没有对全局事件及时解绑,造成代码大量的bug,【其实在看这里之前,我也不会记得对...

  • vue中解绑全局事件

    在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了,但是写在window上的事件,需要我们手动...

  • Vue中全局事件的解绑

    当我们写Vue项目的时候,大部分时候,我们绑定事件都是在具体的组件上通过@去绑定的例如 这样的写法,事件只会在具体...

  • JS基础学习:为元素解绑事件

    解绑事件 用什么方式绑定事件,就应该用对应的方式解绑事件。有三种方式 1.解绑事件对象.on事件名字=事件处理函数...

  • jQuery篇之操作jQuery对象(事件)

    事件对象e 绑定、解绑 on 解绑 手动触发(自定义事件) trigger triggerHandler clic...

  • 事件解绑

    用什么方式绑定事件就应该用什么方式解绑事件 解绑事件: 对象.on事件名字=事件处理函数--->绑定事件对象.on...

  • jQuery事件机制

    jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑...

  • 事件解绑

网友评论

      本文标题:对全局事件的解绑

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