大佬教程收集整理的这篇文章主要介绍了标签上的Angular.js ng-click事件触发两次,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
另外,我还编辑了您的plnkr以显示事件目标:
http://plnkr.co/edit/73aslwHnwVcTd2fxSJ0f?p=预览
input和label元素都在接收事件。
为避免这种情况,您可以在执行任何操作之前检查事件目标的标记名。
关于原因:标签实际上以div或其他元素不会绑定到输入元素的方式。输入称为标签的带标签的控件。
当您在标签上触发动作时,该动作也会在带有标签的控件上运行:
使用angular.js给出以下代码
此处的Plunkr:http://plnkr.co/edit/i4MAzs
HTML:
<form name="myForm" ng-controller="Ctrl">
Try clicking on the labels. <br/>
<label>
Value1: <input type="@R_262_10943@kbox" ng-@R_262_10943@ked='value1' ng-click='toggleValue1()'>
</label> <br/>
<label ng-click='toggleValue2()'>
Value2: <input type="@R_262_10943@kbox" ng-@R_262_10943@ked="value2">
</label> <br/>
<tt>value1 = {{value1}}</tt><br/>
<tt>value2 = {{value2}}</tt><br/>
<tt>fire_count = {{fire_count}}</tt>
</form>
Javascript:
angular.module('App',[]);
function Ctrl($scopE) {
$scope.value1 = true;
$scope.value2 = 'YES'
$scope.fire_count = 0;
$scope.toggleValue1 = function(){
$scope.value1 = !$scope.value1;
$scope.fire_count++;
console.log("Clicked!");
}
$scope.toggleValue2 = function(){
$scope.value2 = !$scope.value2;
$scope.fire_count++;
console.log("Clicked!");
}
}
当您点击“ Value2”标签时,click事件将触发两次。仅当ng-click附加到标签时才会发生这种情况。将其附加到输入元素后,所有内容都会按预期工作。
有人可以解释发生了什么吗?
以上是大佬教程为你收集整理的标签上的Angular.js ng-click事件触发两次全部内容,希望文章能够帮你解决标签上的Angular.js ng-click事件触发两次所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。