Wie verhindere ich ein Klickereignis, wenn der Benutzer auf sein untergeordnetes Element klickt? AngularJS

Ich habe eine <div> mit einer ng-click, aber diese <div> haben eine Kind Element mit auch eine ng-click Richtlinie. Das Problem ist, dass das Click-Ereignis auf dem Kind Elemente Trigger auch das Click-Ereignis desElternelementes.Wie verhindere ich ein Klickereignis, wenn der Benutzer auf sein untergeordnetes Element klickt? AngularJS

Wie kann ich das Klickereignis der Eltern verhindern, wenn ich auf sein Kind klicke?

Here is a jsfiddle um meine Situation zu veranschaulichen.

Vielen Dank im Voraus für Ihre Hilfe.

EDIT

ist hier mein Code:

<body ng-app ng-controller="TestController"> 
<div id="parent" ng-click="parentClick()"> 
    <div id="child" ng-click="childClick()"></div> 

    <p ng-bind="elem"></p> 
</div> 

<div><p style="text-align:center" ng-bind="childElem"></p></div> 
</body> 

<script> 
function TestController($scope) { 
    $scope.parentClick = function() { 
     $scope.elem = 'Parent'; 
    } 

    var i = 1; 
    $scope.childClick = function() { 
     $scope.elem = 'Child'; 
     $scope.childElem = 'Child event triggered x' + i; 
     i++; 
    } 
} 
</script>

Quelle

2015-10-22 KeizerBridge

Drehen Sie Ereignis für das Kind Handler sprudelt aus oder überprüfen, was in der Prozedur mit event.target/diese/yourFrameworksImplementationOfEventTarget – Shilly

Sie sollten die event.stopPropagation() -Methode verwenden. sehen: http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div> 

$scope.childClick = function($event) { 
    $event.stopPropagation(); 
    ... 
}

Quelle

2015-10-22 12:36:44

upvoted Ihre Antwort geklickt wurde, wie es besser formatiert ist :) –

Ok, ich fühle mich jetzt dumm, aber Danke das ist genau was ich will. Ich habe nicht darüber nachgedacht, weil ich das Element generell nicht überlasse. Aber gibt es eine andere Möglichkeit, dies ohne stopPropagation durchzuführen? – KeizerBridge

Sie könnten etwas wie http://stackoverflow.com/a/33281294/1782659 tun, aber ich denke, das ist wirklich hässlich. Es ist das Richtige, das Ereignis von oben nach unten zu stoppen (imo) Sie können auch auf das Ziel des Ereignisses schauen (wenn $ event.target === childElement) –

Verwenden event.stopPropagation die event aus sprudeln den DOM-Baum von Kind Event-Handler zu stoppen.

Updated Demo

function TestController($scope) { 
 
    $scope.parentClick = function() { 
 

 
    $scope.elem = 'Parent'; 
 
    } 
 

 
    var i = 1; 
 
    $scope.childClick = function(e) { 
 
    $scope.elem = 'Child'; 
 
    $scope.childElem = 'Child event triggered x' + i; 
 
    i++; 
 

 
    e.stopPropagation(); // Stop event from bubbling up 
 
    } 
 
}

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#parent { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 10px auto 0 auto; 
 
    background-color: #00acee; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
} 
 
#parent:hover { 
 
    opacity: 0.5; 
 
} 
 
#child { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    z-index: 2; 
 
    background-color: #FFF; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
} 
 
#child:hover { 
 
    opacity: 0.5; 
 
} 
 
#parent p { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    text-align: center; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
 

 
<body ng-app ng-controller="TestController"> 
 
    <div id="parent" ng-click="parentClick()"> 
 
    <div id="child" ng-click="childClick($event)"></div> 
 
    <!--         ^^^^^^^  --> 
 
    <p ng-bind="elem"></p> 
 
    </div> 
 
    <div> 
 
    <p style="text-align:center" ng-bind="childElem"></p> 
 
    </div> 
 
</body>

Quelle

2015-10-22 12:39:12 Tushar

Auch wenn Pieter Willaert Antwort ist viel schöner i Ihre Geige mit einem einfachen boolean Check aktualisiert:

http://jsfiddle.net/qu86oxzc/6/

function TestController($scope) { 
    $scope.boolean = false; 
    $scope.parentClick = function() { 
     if (!$scope.boolean) $scope.elem = 'Parent'; 
     $scope.toggleBoolean(); 
    } 

    var i = 1; 
    $scope.childClick = function() { 
     $scope.boolean = true; 
     $scope.elem = 'Child'; 
     $scope.childElem = 'Child event triggered x' + i; 
     i++; 
    } 

    $scope.toggleBoolean = function() { 
     $scope.boolean = !$scope.boolean; 
    } 
}

Quelle

2015-10-22 12:40:42 messerbill

können Sie auch verwenden, wie es das gleiche tun.

<div id="child" ng-click="childClick();$event.stopPropagation();"></div>

Quelle

2015-10-28 11:25:34 Nadeem

Sie können auch versuchen $event.stopPropagation();. schreibe es nach der Kindfunktion. Es funktioniert wie ein preventdefault.

<body ng-app ng-controller="TestController"> 
<div id="parent" ng-click="parentClick()"> 
    <div id="child" ng-click="childClick();$event.stopPropagation();"></div> 

    <p ng-bind="elem"></p> 
</div> 

<div><p style="text-align:center" ng-bind="childElem"></p></div> 
</body>

Quelle

2016-12-23 12:44:40

Wie verhindere ich ein Klickereignis, wenn der Benutzer auf sein untergeordnetes Element klickt? AngularJS

Antwort

Verwandte Themen