Javascript 在嵌套div中使用ng click重复触发事件

我面临这个问题，因为我在div中有一个复选框，我想在这两种情况下调用一个函数：如果我们更改复选框值或单击div

现在的问题是，当我单击复选框时，事件被触发两次，而我没有得到预期的结果

<div ng-click="checkEntry(config.id)"><input type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></div>

$scope.checkEntry = function(id){
    var idx = $scope.someArray.indexOf(id);
    if(idx === -1){
        $scope.someArray.push(id);
    }else{
        $scope.someArray.splice(idx, 1);
    }
}

$scope.checkEntry=函数（id）{
var idx=$scope.someArray.indexOf（id）；
如果（idx==-1）{
$scope.someArray.push（id）；
}否则{
$scope.someArray.splice（idx，1）；
}
}

现在，如果我单击div，它工作正常，复选框被选中。但是，如果我单击复选框，该函数将被调用两次，并且无法按预期工作

请帮我提供一个解决方案

复选框位于该div的内部，因此当您单击复选框时，实际上也在单击div。 实际上，在您的例子中，您可以从复选框中删除ng change属性，它仍然可以工作，因为无论如何都会通过单击div来调用函数。但这不是使用复选框的正确方法

这里的第一个问题是你是否真的需要那个div？ 我宁愿使用标签来代替：

<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label>

在这种情况下，它可以正常工作，您只需要编写适当的CSS来正确设置标签的样式。这是最好、最正确的解决方案。

复选框位于该div的内部，因此当您单击复选框时，实际上也在单击div。 实际上，在您的例子中，您可以从复选框中删除ng change属性，它仍然可以工作，因为无论如何都会通过单击div来调用函数。但这不是使用复选框的正确方法

这里的第一个问题是你是否真的需要那个div？ 我宁愿使用标签来代替：

<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label>

---

在这种情况下，它可以正常工作，您只需要编写适当的CSS来正确设置标签的样式。这是最好、最正确的解决方案。

两个相同的事件不需要两个事件处理程序。单击输入时，也会单击div。所以您只需要从代码中删除ng更改

<div ng-click="checkEntry(config.id)">test
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked">

---

查看

对于两个相同的事件，您不需要两个事件处理程序。当您单击输入时，div也将被单击。所以您只需要从代码中删除ng更改

<div ng-click="checkEntry(config.id)">test
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked">

---

查看尝试添加

$event.stopPropagation（）ng单击复选框时，单击div的

。它的clicked事件被激发。并将其传播到父元素。元素，它们也将捕获这些事件。这称为事件冒泡。因此，您需要在复选框ng-click上调用$event.stopPropagation（）。尝试添加

$event.stopPropagation（）ng单击复选框时，单击div的

。它的clicked事件被激发。并将其传播到父元素。元素，它们也将捕获这些事件。这称为事件冒泡。因此，您需要在您的复选框上调用$event.stopPropagation（）。不知道为什么这个答案被否决。没有解释：/这和Yarmins的答案是正确的，但最不恰当的答案被标记为解决方案。您的解决方案有效，但可能是我在实施过程中的某个地方做错了，这就是为什么没有得到预期的结果。因此^1它现在对您有效吗，还是仍然有问题？如果是，具体是什么？我使用了我的雅明给出的答案。这对我来说很好。我不知道为什么这个答案被否决了。没有解释：/这和Yarmins的答案是正确的，但最不恰当的答案被标记为解决方案。您的解决方案有效，但可能是我在实施过程中的某个地方做错了，这就是为什么没有得到预期的结果。因此^1它现在对您有效吗，还是仍然有问题？如果是，具体是什么？我使用了我的雅明给出的答案。这对我来说很好。