如何使按鈕可點擊但其父div？
[英]how to make button clickable but its parent div?
問題描述
我試圖在單擊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>
3 個解決方案
解決方案1
2 2016-11-22 22:01:00
您將要使用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>
解決方案2
0 2016-11-22 22:02:45
您需要停止事件傳播。
將按鈕功能更改為此：
$scope.myfun = function(){
event.stopPropagation();
alert("button")
};
<!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; z-index:-999;" ng-app="myApp" ng-controller="myCtrl" ng-click="divC()"> <button ng-click="myfun()" style="float:right;top:0; z-index:100"> CLICK </button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; $scope.myfun = function(){ event.stopPropagation(); alert("button") }; $scope.divC = function(){ alert("div") }; }); </script> </body> </html>
解決方案3
0 2016-11-22 22:04:04
您可以使用event對象（e）並使用它的target屬性來確定由哪個元素調用click事件。
$("div").on("click", function(e)
{
var target = $(e.target);
if(target.is('button'))
alert('button clicked');
});
如何使div可點擊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.