如何使按鈕可點擊，但其父div？

我想一個div內單擊按鈕時觸發功能和其他功能，當DIV是clicked.When我點擊buttondiv也越來越clicked.how使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>

來源

2016-11-22 kevin

你將要使用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>

來源

2016-11-22 22:01:00

PLZ看到question.I希望看到的警報唯一的按鈕按鈕被點擊 – kevin

@kevin這就是尼爾時所做的！點擊「運行代碼片段」查看。 –

你需要停止event propagation.

更改按鈕功能，以這樣的：

$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>

來源

2016-11-22 22:02:45 Zackh105

請看這個問題。我想只有myfun必須在點擊按鈕時執行 – kevin

@ kevin-你只需要按鈕在按鈕被點擊時發出警報，正確嗎？我這樣做 – Zackh105

no.divC被點擊按鈕時觸發。我希望myfun被觸發 – kevin

可以使用event對象（e）和使用它的target屬性來確定click事件是由元素調用。

$("div").on("click", function(e) 
{ 
    var target = $(e.target); 
    if(target.is('button')) 
    alert('button clicked'); 
});

例子：https://jsfiddle.net/g4pr4LL9/

來源

2016-11-22 22:04:04 DinoMyte

如何使按鈕可點擊，但其父div？

回答

相關問題