时间戳

首页 > 解决方案 > Vue-Component 中的 addEventListener 和 vanilla JS

javascript - Vue-Component 中的 addEventListener 和 vanilla JS

问题描述

在 vue-components 中引用 dom-objects 时，vanilla eventListeners 似乎不起作用。

标记

<p id="test1">Hover this (works)</p>
<div id="app">
    <p id="test2">Hover this (not working)</p>
</div>

JS

document.querySelector('#test1').addEventListener('mouseover', function() {
    alert("HOVER1")
})

document.querySelector('#test2').addEventListener('mouseover', function() {
    alert("HOVER2")
})

new Vue({
    el: "#app"
})

现场示例

https://jsfiddle.net/seltsam23/dq7euos0/

这种行为是有意的吗？将 vanilla-js 与 vue 结合使用时还有其他限制吗？

标签： javascriptvue.js

解决方案

实际上，唯一不起作用的是示例，alert("HOVER2")这是因为 Vue 内容是动态呈现的，因此当您的脚本加载时，您要添加事件侦听器的元素可能还不存在。

如果你想让它工作，你需要将它移动到mounted钩子上：

new Vue({
  el: "#app",
  mounted() {
    document.querySelector('#test2').addEventListener('click', function() { alert("HOVER2") })
  }
})

或者您可以使用一个小技巧，将您的querySelector内部放入setTimeout(() => ..., 0)其中将其推送到任务队列的末尾并在所有其他排队任务完成时运行它：

setTimeout(() => document.querySelector('#test2').addEventListener('click', function() { alert("HOVER2") }), 0);

但是，您应该使用 Vue 的内置事件并避免直接进行 DOM 操作，因为 Vue 会丢弃您对 DOM 所做的任何事情，并在下一次更新滴答时将其更新为虚拟 DOM。在这种情况下，它不会导致任何严重的问题，但由于 Vue 有它自己的事件处理程序，你应该使用它们。

推荐阅读