Oto przykład. Powiedzmy, że chcę mieć nakładkę graficzną podobną do wielu witryn. Tak więc po kliknięciu miniatury na całym oknie pojawia się czarna nakładka, w której jest umieszczona większa wersja obrazu. Kliknięcie czarnej nakładki powoduje jej oddalenie; kliknięcie obrazu wywoła funkcję, która pokazuje następny obraz.
HTML:
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
<img src="http://some_src" ng-click="nextImage()"/>
</div>
Javascript:
function OverlayCtrl($scope) {
$scope.hideOverlay = function() {
// Some code to hdie the overlay
}
$scope.nextImage = function() {
// Some code to find and display the next image
}
}
Problemem jest to, że przy tej konfiguracji, jeśli klikniesz obraz, zarówno nextImage()
i hideOverlay()
są nazywane. Ale chcę tylko nextImage()
zostać powołany.
Wiem, że możesz przechwytywać i anulować zdarzenie w następującej nextImage()
funkcji:
if (window.event) {
window.event.stopPropagation();
}
... Ale chcę wiedzieć, czy jest lepszy sposób AngularJS, który nie wymaga ode mnie prefiksu wszystkich funkcji w elementach nakładki za pomocą tego fragmentu.
return false
na końcu funkcjionclick
, nieng-click
.Odpowiedzi:
Co powiedział @JosephSilber, lub przekaż obiekt zdarzenia $ do
ng-click
wywołania zwrotnego i zatrzymaj propagację w nim:źródło
Użyj
$event.stopPropagation()
:Oto demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview
źródło
ReferenceError: $event is not defined
do konsoli.$event.stopPropagation()
w miejscu, w którym to nie działa. Zapomniałem go usunąć. Więc nawet kiedy położyłem to tam, gdzie zadziałało, było to nazywane po raz drugi tam, gdzie nie zadziałało. Pozbyłem się dysfunkcyjnego duplikatu i udało się. Dzięki za pomoc.Podoba mi się pomysł użycia do tego dyrektywy:
Następnie użyj dyrektywy w następujący sposób:
Jeśli chcesz, możesz uczynić to rozwiązanie bardziej ogólnym, na przykład odpowiedź na inne pytanie: https://stackoverflow.com/a/14547223/347216
źródło
stop-event
atrybutem HTML? Nie mogłem go znaleźć w Mozilla Developer Network ani nigdzie indziej.angular-eat-event
dyrektywę o altanie, która działa w podobny sposób!Czasami może to mieć sens:
Postanowiłem to zrobić w ten sposób, ponieważ nie chciałem
myClickHandler()
zatrzymywać propagacji zdarzeń w wielu innych miejscach, w których były używane.Jasne, mogłem dodać parametr boolowski do funkcji obsługi, ale
stopPropagation()
jest on o wiele bardziej znaczący niż tylkotrue
.źródło
$event.stopPropagation()
do elementów wewnętrznych.checkbox
Owinąłemdiv
element. Mójdiv
bierze 12 kolumn icheckbox
bierze powiedzmy 3 kolumny. Chciałem wywołać funkcjęA
po kliknięciudiv
i funkcjęB
po kliknięciucheckbox
. więc kiedy kliknąłem,checkbox
obie funkcje były wywoływane. Kiedy dodamng-click="$event.stopPropagation()"
docheckbox
, wywołano tylko funkcjęB
.stopPropagation()
to, aby zatrzymać propagację zdarzenia do elementów nadrzędnych. Nie jestem pewien, jak dzwoniszB
, ponieważ nie jest w specififedng-click
, ale punkt odpowiedź jest taka, że można to zrobić:<checkbox ng-click="B(); $event.stopPropagation()">
. Nie musisz dołączać tejstopPropagation()
funkcji doB
.To działa dla mnie:
źródło
Jeśli nie chcesz dodawać zatrzymania propagacji do wszystkich łączy, to również działa. Trochę bardziej skalowalny.
źródło
event.target.classList.indexOf('overlay')
I ta sztuczka działa dobrze, nawet jeśli div jest zagnieżdżony w innychJeśli wstawisz ng-click = "$ event.stopPropagation" na elemencie nadrzędnym twojego szablonu, stopPropogation zostanie przechwycone, gdy pojawi się ono w drzewie, więc musisz napisać go tylko raz dla całego szablonu.
źródło
Możesz zarejestrować kolejną dyrektywę,
ng-click
która zmienia domyślne zachowanieng-click
i zatrzymuje propagację zdarzeń. W ten sposób nie musisz dodawać$event.stopPropagation
ręcznie.źródło
Wykorzystanie kontrolera IN
źródło