VueJS父鼠标悬停事件屏蔽子鼠标悬停事件

Posted 2021-04-17

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

我无法让孩子鼠标悬停事件发生。看来父元素“覆盖”子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>

答案

另外，您可以使用event modifier将此缩写为@mouseover.stop="childHover"。

另一答案

 <div id='app'>
  <div id='parent' @mouseover="parentHover">
    <div id='child' @mouseover="childHover">

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

这是因为事件冒泡的主体

当一个事件发生在一个元素上时，它首先在其上运行处理程序，然后在其父元素上运行，然后在其他祖先上运行。

这意味着childHover处理程序将被执行，并在它之后立即执行parentHover，使子执行不可见。

要解决您的问题，您可以使用事件的event.stopPropagation()方法来确保从子节点到父节点不会发生冒泡。

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