Question

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

我无法触发子鼠标悬停事件。看来父元素是＆＃34;覆盖＆＃34;子div和只有父mouseover事件被注册。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

Answer 2

 <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'
    }
  }
});

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

2 个答案: