Question

考虑this fiddle.我有<input type='checkbox'>与其对应的<label>相关联。在他们的父母身上，我有一个click绑定。

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

考虑到我想保留当前HTML结构（<label>旁边的<input>），有没有办法让<label>表现得像<input>元素？（也只触发click一次）

编辑：如果我从return true;处理程序的功能中删除click语句，它不会触发两次，但也会赢得选中复选框。选中该复选框是必需的。 Here is a case我没有对父元素执行操作。如果您点击<label>，它会检查<input>。

Answer 1

我不完全理解为什么会这样，但从标签中删除for属性可以防止这种情况发生。

标签仍然位于之前的位置。

EDIT 如果div也需要设置框，请尝试此操作： HTML：

<div class="parent" data-bind="click: checkTheBox">
  <input type="checkbox" id="test" data-bind="checked: checkedFlag">
  <label for="test">TestLabel</label>
</div>

JS：

function testVM(){
var self = this;

self.checkedFlag = ko.observable(false);

self.checkTheBox = function(){
    console.log("In funct")
    console.log("before: " + self.checkedFlag())
    if (self.checkedFlag()){
        self.checkedFlag(false);
    }
    else{
        self.checkedFlag(true);
    }
    console.log("after: " + self.checkedFlag())
};

self.myTest = function(data, event){

};

}

ko.applyBindings（new testVM（））;

Answer 2

我找到了你的答案here。诀窍是使用自定义绑定使标签停止冒泡。

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

stopBubble绑定位于链接处，也位于小提琴中。

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

Answer 3

您可以使用

    event.preventDefault(); // stop bubbling

或只是

    return false; // is equals to: event.stopPropagation(); event.preventDefault();

在parentAction函数中。

更新

看起来点击事件会从checked敲除绑定中触发。以下代码将修复它，但它闻起来像一个黑客。可能有人会提出更好的待遇。

function testVM(){
    var self = this;

    self.checkedFlag = ko.observable(false);

    self.checkedFlag.subscribe(function() {
        event.stopPropagation();
    });

    self.parentAction = function(data, event){
        alert('triggered');
        //event.stopPropagation();
        //event.preventDefault();
        return true;
    };
}

点击输入[复选框]标签将触发父母点击事件（淘汰赛）

3 个答案:

更新