点击输入[复选框]的标签将触发父母点击事件的两次（淘汰赛） [英] Clicking on an input[checkbox]'s label will fire twice the parent's click event (knockout)

问题描述

考虑这个小提琴。我有< input type ='复选框' > 链接到相应的< label> 。在他们的父母身上，我有点击绑定。

Consider this fiddle. I have an <input type='checkbox'> linked to its corresponding <label>. On their parent, I have a click binding.

问题是，点击< label> 会触发父母点击两次，而点击< input> 只会触发一次。

The problem is, clicking on the <label> will trigger the parent's click twice, whereas clicking on the <input> will trigger it only once.

考虑到我想保留< label> ） >< input> ），有没有办法让< label> 表现得像< input> ; 元素？ （也就是触发点击一次）

Considering I want to keep the current HTML structure (<label> next to the <input>), is there a way to make the <label> behave like the <input> element? (aka trigger the click only once)

编辑：如果我删除 return true; 语句来自点击处理程序的函数，它不会触发两次，但是，它也不会选中复选框。选中该复选框是必需的。 这是一个案例，我对父元素没有操作。如果您点击< label> ，它将会检查< input> 。

EDIT: If i remove the return true; statement from the click handler's function, it wont trigger twice, but also, it won't select the checkbox. Selecting the checkbox is required. Here is a case where I don't have the action on the parent element. If you click on the <label>, it will check the <input>.

推荐答案

我找到了答案此处。诀窍是使标签停止冒充自定义绑定。

I found an answer for you here. The trick is to make the label stop bubbling with a custom binding.

<label for="test" data-bind="stopBubble:parentAction">TestLabel</label>

stopBubble 绑定在链接处，还有小提琴。

The stopBubble binding is at the link, and also in the Fiddle.

http：// jsfiddle.net/9rkrahm6/2/

这篇关于点击输入[复选框]的标签将触发父母点击事件的两次（淘汰赛）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！