将V-on鼠标悬停在儿童身上时会触发

Question

        <div style='cursor: pointer' v-for="row in rows" class="list-group-item list-group-item-action bg-light sidebar-item pl-2" :active="row.active">
            <div v-on:mouseout.stop="controls = null" v-on:mouseover="controls = row.id"  class="row">
                <div class="col-9">{{ row.title }}</div>
                <div v-if="controls == row.id" class="col-1">
                    <i class="fa fa-edit text-primary"></i>
                </div>
                <div v-if="controls == row.id" class="col-1">
                    <i class="text-danger fa fa-trash"></i>
                </div>
            </div>
        </div>

这是我的代码。当鼠标悬停在图标上时，@mouseout会触发，即使它们仍位于div中并且您实际上还没有mouseout编辑过。

我尝试在父div上使用@mouseover和@mouseout-相同的结果。我还尝试了所有我能想到的事件修饰符。

Answer 1

这是事件侦听器mouseover或mouseout的默认行为。如果要忽略孩子，则必须：

1. 在子级上设置css属性pointer-events: none或

2. 检查光标是否在事件处理程序的父元素内

但是，对于您的用例（当父对象悬停时显示一个元素），css更合适。

例如

  .col-1 {
    display: none;
  }

  .row:focus > .col-1,
  .row:focus-within > col-1,
  .row:hover > col-1 {
    display: block;
  }