Question

我需要在Vue中触发鼠标悬停，但仅在元素及其子元素上，而不在其父元素上。根据文档，这应该与.stop修饰符一起使用，但是由于某些原因它仍然会冒泡。 .self无法处理子元素。

有什么主意我可能做错了吗？

代码很简单：

<div v-for="(element) in elements" :key="element.id" :class="element.states"
    @mouseover.stop="element.states.hover = true"
    @mouseleave.stop="element.states.hover = false"></div>

或在组件上：

<my-component v-for="(element) in elements" :key="element.id" :class="element.states"
    @mouseover.native.stop="element.states.hover = true"
    @mouseleave.native.stop="element.states.hover = false"></my-component>

Answer 1

我创建了一个简单的代码片段，以显示如何将@mouseover和@mouseleave与stop event修饰符一起使用，并且似乎可以正常工作，即，在进入和离开外部元素时，您只能在控制台中看到BodyOver和BodyLeave。

new Vue({
  el: "#app",
  data: () => {
    return {
      parents: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    over(ev) {
      console.log(`Over ${ev.target.classList[0]}`);
    },
    leave(ev) {
      console.log(`Leave ${ev.target.classList[0]}`);
    },
    bodyOver(ev) {
      console.log(`Body Over ${ev.target.classList[0]}`);
    },
    bodyLeave(ev) {
      console.log(`Body Leave ${ev.target.classList[0]}`);
    }
  }
});

.body {
  padding: 20px;
  background: red;
}

.parent {
  padding: 20px;
  background: green;
}

.child {
  padding: 20px;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="body" @mouseover="bodyOver" @mouseleave="bodyLeave">
    Body
    <div class="parent" @mouseover.stop="over" @mouseleave.stop="leave" v-for="parent in parents">
      Parent
      <div class="child">
        Child
      </div>
    </div>
  </div>
</div>

Answer 2

经过大量测试和反复尝试后，我发现了无法正常工作的原因：由于DOM嵌套，当悬停在子项上时，不会触发mouseleave事件。还感谢@Shoejep对日志记录的测试，您可以在其中查看此行为。

要解决此问题，我必须对孩子使用mouseout事件，该事件会在进入孩子时被父母触发。

Vue：@ mouseover.stop仍然冒泡

2 个答案: