如何在父 li 中捕获子复选框单击事件？

Question

我有以下显示我们正在使用的结构的 Vue 代码：

<template>
  <li class="mm-product-item" v-on:click="edit(item)">
    <p class="mm-product-info input-field">
      <input type="checkbox"
              class="filled-in"
              :id="'checkbox-' + item.id"
              :checked="item.addNextOrder"
              v-on:click.capture.stop="toggleNextOrder($event, item.id)" />
      <label :for="'checkbox-' + item.id"></label>
      <span class="mm-product-name" click="edit(item)">{{ item.name }}</span>
      <span class="mm-product-quantity">{{ item.quantity }}</span>
      <span class="mm-product-unit">{{ item.selectedUnit }}</span>
    </p>

    <button href="#remove-product" @click.prevent.stop="destroy(item.id)" class="mm-product-remove" title="remover produto">&times;</button>
  </li>
</template>

因此，checkbox 嵌套在 p 中，li 中嵌套。

li 作为父级，有一个更宽、更大的区域，应该触发edit(item) 方法。这工作得很好。

checkbox 虽然更小，但也应该捕获点击事件并触发toggleNextOrder 方法。

如果li 中没有指定事件，checkbox 事件处理就可以正常工作。

但如果li 事件存在（如上面的sn-p 中），checkbox 事件甚至不会发生，但根据Vue's documentation，它应该发生。

我能够使类似的情况正常工作in this JSFiddle，但由于某种原因，在这个生产环境中它不起作用。

有没有办法解决这个问题？

Answer 1

我在 Chrome 开发工具的帮助下发现了发生了什么。

复选框旁边有一个标签，与之关联：

<input type="checkbox" (...) />
<label :for="'checkbox-' + item.id" (...) ></label>

使用谷歌浏览器的开发工具检查<input type=checkbox>，似乎复选框“没有区域”：

•••

在检查它旁边的 <label> 时，我发现它实际上“包裹并包围”了复选框：

•••

所以我将 @click.capture.stop.prevent="toggleNextOrder(item.id)" 事件处理程序添加到标签中，而不是复选框，现在它可以工作了。