javascript - 如何使按钮可点击但其父div?

标签 javascript jquery html angularjs

我试图在单击 div 内的按钮时触发一个函数,并在单击 div 时触发另一个函数。当我单击 button div 时,也是如此单击按钮时如何使 div 不可单击

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div style="width:400px;height:400px;background:blue" ng-app="myApp" ng-controller="myCtrl" ng-click="divC()">


<button ng-click="myfun()" style="float:right;top:0">
CLICK
</button>


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
$scope.myfun = function(){
alert("button")
};
$scope.divC = function(){
alert("div")
};
});
</script> 

</body>
</html>

最佳答案

您将需要使用event.stopPropagation(),这将阻止点击冒泡到其容器。

https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div style="width:400px;height:400px;background:blue" ng-app="myApp" ng-controller="myCtrl" ng-click="divC()">


<button ng-click="myfun($event)" style="float:right;top:0">
CLICK
</button>


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
$scope.myfun = function(event){
event.stopPropagation();
alert("button")
};
$scope.divC = function(){
alert("div")
};
});
</script> 

</body>
</html>

关于javascript - 如何使按钮可点击但其父div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40752358/

相关文章:

jquery - 如何使用 DJANGO REST 框架和 ajax 发出 POST 请求

javascript - 从表单呈现数据并通过 API 使用它

javascript - 如何快速从源数组中读取子数组

javascript - 单击事件未在 Jquery 中的 Bootstrap 下拉菜单上触发

jquery - 更改 Bootstrap 模式中的scrollTop()

jquery - select_tag 使用 Rails3 + Jquery 进行 Ajax 更新

javascript - 如何根据 URL 的输出设置 JavaScript 数组?

html - 尝试了我能找到的所有建议,仍然无法让子元素留在父元素中

javascript - setAttribute 使属性名称小写

javascript - 如何使用 vanilla javascript 触发窗口调整大小事件?