添加点击事件

Question

我想问一下 Vue 中的点击事件。 我有一个包含 div 和按钮的跨度。当我单击按钮 (thisButton) 时，它运行良好，但跨度 (thisMask) 在单击时似乎不起作用。我还添加了发射事件，当我单击 thisButton 时，它也会触发发射事件 thisMaskClicked。但是 console.log 只是返回 thisButton 所拥有的。我错过了什么吗？

<span class="this_mask" @click="thisMask">
  <div class="this__wrap">
    <div class="this__text">
      <button class="this__button" @click="thisButton"></button>
    </div>
  </div>
</span>

this.js

thisMask () {
  this.$emit('thisMaskClicked')
  console.log("This Mask Executed")
},
thisButton() {
  this.$emit('thisButtonClicked')
  console.log("This Button Clicked")
}

Answer 1

您正在寻找的是 self 修饰符。

如果父节点和子节点注册了相同类型的事件，那么当该类型事件调度时，就会调用父节点和子节点的处理程序。

这是一个例子fiddle

您的代码应如下所示：

<span class="this_mask" @click="thisMask">
  <div class="this__wrap">
    <div class="this__text">
      <button class="this__button" @click.self="thisButton"></button>
    </div>
  </div>
</span>

代码未经测试，所以我不确定您是否必须在示例中附加到 button 或 span