Stop propagacji zdarzeń myszy
Jaki jest najprostszy sposób na zatrzymanie propagacji zdarzeń myszy w Angular ?
Czy powinienem przekazać obiekt specjalny $event
i wywołać stopPropagation()
osobiście, czy jest jakiś inny sposób.
Na przykład w Meteorze, mogę po prostu zwrócić {[2] } z obsługi zdarzenia.
14 answers
Jeśli chcesz mieć możliwość dodawania tego do dowolnych elementów bez konieczności kopiowania/wklejania tego samego kodu w kółko, możesz zrobić dyrektywę, aby to zrobić. Jest to tak proste jak poniżej:
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
@HostListener("click", ["$event"])
public onClick(event: any): void
{
event.stopPropagation();
}
}
Następnie po prostu dodaj go do elementu, na którym chcesz go umieścić:
<div click-stop-propagation>Stop Propagation</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-12 11:28:07
Najprostszym jest wywołanie stop propagation w obsłudze zdarzenia. $event
działa tak samo w Angular 2 i zawiera trwające Zdarzenie (przez niego kliknięcie myszą, Zdarzenie myszą, itd.):
(click)="onEvent($event)"
Podczas obsługi zdarzenia możemy tam zatrzymać propagację:
onEvent(event) {
event.stopPropagation();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 16:09:28
Wywołanie stopPropagation
na zdarzeniu uniemożliwia rozmnażanie się:
(event)="doSomething($event); $event.stopPropagation()"
Dla preventDefault
just return false
(event)="doSomething($event); false"
Powiązanie zdarzeń pozwala na wykonywanie wielu instrukcji i wyrażeń, które mają być wykonywane kolejno (oddzielone ;
, jak w plikach *.ts
.
Wynik ostatniego wyrażenia spowoduje wywołanie preventDefault
Jeśli falsy. Więc uważaj, co zwraca wyrażenie (nawet jeśli jest tylko jedno)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-10 08:39:31
Dodanie do odpowiedzi z @ AndroidUniversity. W jednej linijce możesz napisać tak:
<component (click)="$event.stopPropagation()"></component>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-05 14:38:25
To mi pomogło:
Mykomponent.komponent.ts:
action(event): void {
event.stopPropagation();
}
Mykomponent.komponent.html:
<button mat-icon-button (click)="action($event);false">Click me !<button/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-05 16:10:54
Jeśli używasz metody powiązanej ze zdarzeniem, po prostu zwróć false:
@Component({
(...)
template: `
<a href="/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 16:09:02
Musiałem stopPropigation
i preventDefault
aby nie dopuścić do powiększenia guzika akordeonu, który siedział powyżej.
@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-22 19:55:52
Nic nie działało w IE (Internet Explorer). Moi testerzy byli w stanie złamać mój modal, klikając wyskakujące okno na przyciskach za nim. Tak więc słuchałem kliknięcia na moim modalnym ekranie div I wymuszonego ponownego ustawienia ostrości na przycisku popup.
<div class="modal-backscreen" (click)="modalOutsideClick($event)">
</div>
modalOutsideClick(event: any) {
event.preventDefault()
// handle IE click-through modal bug
event.stopPropagation()
setTimeout(() => {
this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus')
}, 100)
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-13 15:00:31
Właśnie sprawdziłem w aplikacji Angular 6, event.stopPropagation () działa na obsłudze zdarzenia bez przechodzenia nawet $event
(click)="doSomething()" // does not require to pass $event
doSomething(){
// write any code here
event.stopPropagation();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-16 08:30:55
Użyłem
<... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...>...
W skrócie po prostu oddziel inne rzeczy / wywołania funkcji za pomocą'; ' i dodaj $event.stopPropagation ()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-11 10:50:58
Wyłącz łącze href za pomocą JavaScript
<a href="#" onclick="return yes_js_login();">link</a>
yes_js_login = function() {
// Your code here
return false;
}
Jak powinno działać również w maszynopisie z Angular (moja wersja: 4.1.2)
Szablon<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
RouterLink
</a>
Maszynopis
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
Ale nie wyłącza wykonywania routerLink!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-11 06:16:50
To rozwiązało mój problem, z preventign, że zdarzenie zostaje zwolnione przez dziecko:
doSmth(){
// what ever
}
<div (click)="doSmth()">
<div (click)="$event.stopPropagation()">
<my-component></my-component>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-12 08:12:36
Wypróbuj tę dyrektywę
@Directive({
selector: '[stopPropagation]'
})
export class StopPropagationDirective implements OnInit, OnDestroy {
@Input()
private stopPropagation: string | string[];
get element(): HTMLElement {
return this.elementRef.nativeElement;
}
get events(): string[] {
if (typeof this.stopPropagation === 'string') {
return [this.stopPropagation];
}
return this.stopPropagation;
}
constructor(
private elementRef: ElementRef
) { }
onEvent = (event: Event) => {
event.stopPropagation();
}
ngOnInit() {
for (const event of this.events) {
this.element.addEventListener(event, this.onEvent);
}
}
ngOnDestroy() {
for (const event of this.events) {
this.element.removeEventListener(event, this.onEvent);
}
}
}
Użycie
<input
type="text"
stopPropagation="input" />
<input
type="text"
[stopPropagation]="['input', 'click']" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-04 12:52:44
Dodanie false po funkcji zatrzyma propagację zdarzenia
<a (click)="foo(); false">click with stop propagation</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-24 08:36:57