Відповіді:
Якщо ви хочете мати можливість додавати це до будь-яких елементів без необхідності копіювати / вставляти один і той же код знову і знову, ви можете зробити директиву для цього. Це так само просто, як нижче:
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
@HostListener("click", ["$event"])
public onClick(event: any): void
{
event.stopPropagation();
}
}
Потім просто додайте його до потрібного елемента:
<div click-stop-propagation>Stop Propagation</div>
@HostListener("mousedown", ["$event"]) public onMousedown(event: any): void { event.stopPropagation(); }
Найпростіший - викликати розповсюдження зупинки на обробці подій. $event
працює те саме в Angular 2 і містить поточну подію (нею клацання миші, подія миші тощо):
(click)="onEvent($event)"
на обробнику події ми можемо зупинити розповсюдження:
onEvent(event) {
event.stopPropagation();
}
<button confirmMessage="are you sure?" (click)="delete()">Delete</button>
, і в моїй директиві:, (click)="confirmAction($event)
то confirmAction(event) { event.stopPropagation(); }
;
event
функції обробника stopPropogation()
недоступна. Мені довелося це зробити прямо у розмітці: `(click) =" foo (); $ event.stopPropogation () "
Дзвінки stopPropagation
на подію запобігають поширенню:
(event)="doSomething($event); $event.stopPropagation()"
Для preventDefault
просто поверненняfalse
(event)="doSomething($event); false"
;
Однак вони не мають кінця. Я це зміню.
false
<3
Додавання відповіді від @AndroidUniversity. В одному рядку ви можете записати його так:
<component (click)="$event.stopPropagation()"></component>
Якщо ви використовуєте метод, пов'язаний з подією, просто поверніть false:
@Component({
(...)
template: `
<a href="https://stackoverflow.com/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
false
дзвінків preventDefault
немає stopPropagation
.
preventDefault
називається. github.com/angular/angular/blob/… , github.com/angular/angular/blob/…
Це працювало для мене:
mycomponent.component.ts:
action(event): void {
event.stopPropagation();
}
mycomponent.component.html:
<button mat-icon-button (click)="action($event);false">Click me !<button/>
Мені довелося stopPropigation
і preventDefault
для того, щоб не допустити розширення кнопки на гармошці, яку вона сиділа нагорі.
Так...
@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
Нічого не працювало для IE (Internet Explorer). Мої тестери змогли зламати мою модуль, натиснувши на спливаюче вікно на кнопках позаду нього. Отже, я прослухав клацання на моєму модальному екрані div і примусив переорієнтуватися на спливаючу кнопку.
<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)
}
я використав
<... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...>...
коротше просто відокремте інші речі / функції дзвінків з ';' і додайте $ event.stopPropagation ()
Я щойно зареєстрував у програмі Angular 6, event.stopPropagation () працює на обробці подій, навіть не передаючи $ події
(click)="doSomething()" // does not require to pass $event
doSomething(){
// write any code here
event.stopPropagation();
}
<a href="#" onclick="return yes_js_login();">link</a>
yes_js_login = function() {
// Your code here
return false;
}
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
RouterLink
</a>
TypeScript
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
Але це не відключає виконання routerLink!
Додавання помилки після функції зупинить поширення події
<a (click)="foo(); false">click with stop propagation</a>
Це вирішило мою проблему, не допустивши, що подія дітьми звільняється:
doSmth(){
// what ever
}
<div (click)="doSmth()">
<div (click)="$event.stopPropagation()">
<my-component></my-component>
</div>
</div>
Спробуйте цю директиву
@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);
}
}
}
Використання
<input
type="text"
stopPropagation="input" />
<input
type="text"
[stopPropagation]="['input', 'click']" />