Question

当引用vue组件内部的dom对象时，似乎普通的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结合使用时，还有其他限制吗？

Answer 1

实际上，唯一不起作用的是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的内置events并避免进行直接的DOM操作，因为Vue会丢弃您对DOM所做的所有操作，并在下一个更新时更新它的虚拟DOM。在这种情况下，它不会导致任何严重问题，但是由于Vue具有自己的事件处理程序，因此您应该使用它们。

Vue-Component中的addEventListener与原始JS

标记

JS

实时示例

1 个答案: