javascript - removeEventListener not working on custom directive
问题描述
So i have a directive it will run a function after it reached a certain threshold from the top of the viewport but i cannot seem to remove the event listener :/.
Here is the directive:
const scrollHandler = (el, binding) => {
const yOffset = el.getBoundingClientRect().y;
const isScrolled = document.body.scrollTop > (yOffset - 20) || document.documentElement.scrollTop > (yOffset - 20);
binding.value(isScrolled, el);
};
const GlobalDirectives = {
install(Vue) {
Vue.directive('scroll-watch', {
inserted(el, binding) {
window.addEventListener('scroll', () => scrollHandler(el, binding));
},
unbind(el, binding) {
window.removeEventListener('scroll', () => scrollHandler(el, binding), true);
console.log('is unbind');
},
});
},
};
and in the component:
<template>
<section v-scroll-watch="doSomething">
// html
</section>
</template>
<script>
export default {
methods: {
doSomething(val, el) {
console.log(val, el);
},
},
};
</script>
even when i navigate to another route somehow i can see that unbind is working but it still calls the event listener. can anyone tell me what im doing wrong?
解决方案
推荐阅读
- flutter - 参数类型“映射动态动态”不能分配给参数类型“映射字符串动态”
- python - 没有循环的帕斯卡三角形?
- powershell - Powershell Try Catch 在外部脚本失败时停止
- node.js - 我如何将 node.js 15.10.0 下载到 mac
- python - Python:库是通过命令行安装的,但在 Spyder IDE 中不可用?
- micronaut - 基于用户类型的 micronaut 安全多登录控制器
- arrays - 加入 Array 中的 2 个项目并将其作为 Item 添加到同一数组中
- java - Opengl ES 1.0 教程中的代码不起作用(Java N-IDE)
- percentage - Tableau——计算条形图中嵌套维度的总计和总计百分比
- angular - Web应用程序离子框架角度中的公告横幅