VueJS parent mouseover event masking child mouseover event

Question

我正在使用 VueJS 并尝试在两个元素上触发鼠标悬停事件，一个元素是另一个元素的子元素。

我无法触发子鼠标悬停事件。看起来父元素正在“覆盖”子 div，并且只注册了父鼠标悬停事件。

var vm = new Vue({
  el: '#app',
  data: {
    hoverTarget: 'none'
  },
  methods: {
    parentHover: function() {
      this.hoverTarget = 'parent'
    },
    childHover: function() {
      this.hoverTarget = 'child'
    }
  }
});

#parent {
  width: 100px;
  height: 100px;
  background: #000000;
}

#child {
  width: 50px;
  height: 50px;
  background: #FFFFFF;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id='app'>
  <div id='parent' @mouseover="parentHover">
    <div id='child' @mouseover="childHover">

    </div>
  </div>
  {{ hoverTarget }}
</div>

Answer 1

此外，您可以使用事件修饰符将其缩写为@mouseover.stop="childHover"。