Ich habe ein Klickereignis in einer Tabellenzeile und in dieser Zeile gibt es auch eine Löschschaltfläche mit einem Klickereignis. Wenn ich auf die Schaltfläche Löschen klicke, wird auch das Klickereignis in der Zeile ausgelöst.
Hier ist mein Code.
<tbody>
<tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
</tr>
</tbody>
Wie kann ich verhindern, dass das showUser
Ereignis ausgelöst wird, wenn ich in der Tabellenzelle auf die Schaltfläche Löschen klicke?
javascript
angularjs
angularjs-ng-click
michael_knight
quelle
quelle
ng-click
:ng-click="deleteUser(user.id, $event)"
.$event.preventDefault()
, sonst$event.stopPropagation()
leitete mich ein Anruf beim Klicken auf die Schaltfläche zum Stammverzeichnis meiner App weiter.Eine Ergänzung zu Stewies Antwort. Falls Ihr Rückruf entscheidet, ob die Weitergabe gestoppt werden soll oder nicht, fand ich es nützlich, das
$event
Objekt an den Rückruf zu übergeben:Und dann können Sie im Rückruf selbst entscheiden, ob die Weitergabe des Ereignisses gestoppt werden soll:
quelle
Ich habe eine Direktive geschrieben, mit der Sie die Bereiche einschränken können, in denen ein Klick Auswirkungen hat. Es könnte für bestimmte Szenarien wie dieses verwendet werden. Anstatt sich also von Fall zu Fall mit dem Klicken befassen zu müssen, können Sie einfach sagen, dass "Klicks nicht aus diesem Element herauskommen".
Sie würden es so verwenden:
Beachten Sie, dass dadurch alle Klicks auf die letzte Zelle und nicht nur auf die Schaltfläche verhindert werden. Wenn Sie dies nicht möchten, können Sie den Button wie folgt umschließen:
Hier ist der Code der Richtlinie:
quelle
ngClick
, da ich ein bereits behandeltes Ereignis eigentlich nie weitergeben möchte.ignoreNgClick=true
dem Event einfach eine Eigenschaft wie hinzufügen und damit umgehen ... irgendwie. Idealerweise in der ursprünglichenngClick
Direktive, aber das Ändern klingt schmutzig.Wenn Sie eine Direktive wie mich verwenden, funktioniert dies so, wenn Sie die Zwei-Daten-Bindung benötigen, z. B. nach dem Aktualisieren eines Attributs in einem Modell oder einer Sammlung:
Jetzt können Sie es einfach in jeder Schaltfläche, jedem Link, jedem Div usw. wie folgt verwenden:
quelle
quelle