如何在父 li 中捕获子复选框单击事件？
Posted
技术标签:
【中文标题】如何在父 li 中捕获子复选框单击事件？【英文标题】：How to capture child checkbox click event inside parent li? 【发布时间】：2017-12-17 20:08:23 【问题描述】：我有以下显示我们正在使用的结构的 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">×</button>
</li>
</template>
因此，checkbox 嵌套在 p 中，li 中嵌套。
li 作为父级，有一个更宽、更大的区域，应该触发edit(item) 方法。这工作得很好。
checkbox 虽然更小，但也应该捕获点击事件并触发toggleNextOrder 方法。
如果li 中没有指定事件，checkbox 事件处理就可以正常工作。
但如果li 事件存在（如上面的sn-p 中），checkbox 事件甚至不会发生，但根据Vue's documentation，它应该发生。
我能够使类似的情况正常工作in this JSFiddle，但由于某种原因，在这个生产环境中它不起作用。
有没有办法解决这个问题？
【问题讨论】：
你能用导致问题的代码复制错误吗？ 如果您在 JSFiddle 中删除了内部 onClick，它仍然可以工作。所以看起来你内心的 onClick 什么也没做。也许您可以为您的生产代码做类似的事情，您将$event 作为参数发送到li onClick，如果您的$event 在复选框上，那么您调用toggleNextOrder
【参考方案1】：
我在 Chrome 开发工具的帮助下发现了发生了什么。
复选框旁边有一个标签，与之关联：
<input type="checkbox" (...) />
<label :for="'checkbox-' + item.id" (...) ></label>
使用谷歌浏览器的开发工具检查<input type=checkbox>，似乎复选框“没有区域”：
•••
在检查它旁边的 <label> 时，我发现它实际上“包裹并包围”了复选框：
•••
所以我将 @click.capture.stop.prevent="toggleNextOrder(item.id)" 事件处理程序添加到标签中，而不是复选框，现在它可以工作了。
【讨论】：
以上是关于如何在父 li 中捕获子复选框单击事件？的主要内容，如果未能解决你的问题，请参考以下文章
即使通过Javascript代码检查，如何触发复选框单击事件？
Bootstrap - 未捕获的类型错误：无法读取复选框单击时未定义的属性“单击”