<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/cmt.js"></script>
</head>
<body ng-controller="mainController">
<label>
<button class="btn btn-info" ng-click="change(label, $event)" ng-if="label.isSelect">button1</button>
<button class="btn btn-success" ng-click="change(label, $event)" ng-if="!label.isSelect">button2
</button>
</label>
</body>
</html>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function($scope) {
$scope.label = {
isSelect : true
}
$scope.change = function(label, event) {
console.log(event.target)
label.isSelect = !label.isSelect
}
}])
上面代码本意是点击切换button,但是实际结果是button没改变,通过调试发现真正的过程是变了两次变回了初始状态,也就是change函数执行了两次,我试着把第二个函数名字改成别的,但是结果还是执行了。函数体中
label.isSelect = !label.isSelect
这段存在就会引起执行button2的点击事件执行。console结果:
解决方式1,ngif改为ngshow
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/cmt.js"></script>
</head>
<body ng-controller="mainController">
<label>
<button class="btn btn-info" ng-click="change(label, $event)" ng-show="label.isSelect">button1</button>
<button class="btn btn-success" ng-click="change(label, $event)" ng-show="!label.isSelect">button2
</button>
</label>
</body>
</html>
解决方式2,去除<label>标签
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/cmt.js"></script>
</head>
<body ng-controller="mainController">
<button class="btn btn-info" ng-click="change(label, $event)" ng-if="label.isSelect">button1</button>
<button class="btn btn-success" ng-click="change(label, $event)" ng-if="!label.isSelect">button2
</button>
</body>
</html>
原因是label包裹button会执行两次click事件,因为第一次改变使得第二个button显示出来执行了第二个button的click事件。
<label for="innerIpt1">
<input id="innerIpt1" type="checkbox"/>label1
</label>
var label1 = document.querySelector("label");
var input1 = document.querySelector("#innerIpt1");
label1.addEventListener("click", function() {
console.log("label1");
}, false);
input1.addEventListener("click", function(e) {
// e.stopPropagation()
console.log("input1");
}, false);
点击label1的时候,console输出:
label1
input1
lable1
①点击label1,触发click,输出 label1;
②点击label1,用于浏览器内部关联关系会触发input的click,输出input1;
③上一个事件冒泡到label1,触发click,输出 label1;