wie man Knopf klickbar macht aber sein Elternteil div?

Ich versuche, eine Funktion auszulösen, wenn eine Schaltfläche in einem div und eine andere Funktion angeklickt wird, wenn das div ist clicked.When ich die buttondiv bin Klick wird auch clicked.how bekommen div nicht anklickbar zu machen, wenn die Schaltfläche geklickt wirdwie man Knopf klickbar macht aber sein Elternteil 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>

Quelle

2016-11-22 kevin

Sie wollen event.stopPropagation() verwenden, wird dies die vollständig beendet werden, um ihre Behälter sprudelt.

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>

Quelle

2016-11-22 22:01:00

plz sehen die question.I nur Schaltfläche in der Warnung angezeigt werden sollen, wenn die Schaltfläche geklickt wird – kevin

@ Kevin Das ist, was Neil tat! Klicken Sie auf "Code-Snippet ausführen", um zu sehen. –

Sie benötigen die event propagation.

ändern Funktion Ihre Taste, um dies zu stoppen:

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

Quelle

2016-11-22 22:02:45 Zackh105

Bitte beachten Sie die Frage.Ich möchte nur myfun ausführen, wenn auf die Schaltfläche geklickt wird – kevin

@ kevin- Sie wollten nur die Schaltfläche zu warnen, wenn die Schaltfläche geklickt wurde, richtig? Ich tat das – Zackh105

no.divC wird ausgelöst, wenn Taste geklickt wird. Ich möchte myfun ausgelöst werden – kevin

können Sie event Objekt (e) verwenden, und verwenden Sie es target Eigenschaft ist das click Ereignis zu bestimmen, von welchem Element aufgerufen.

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

Beispiel: https://jsfiddle.net/g4pr4LL9/

Quelle

2016-11-22 22:04:04 DinoMyte

wie man Knopf klickbar macht aber sein Elternteil div?

Antwort

Verwandte Themen