जवाबों:
यदि आप एक ही कोड को बार-बार कॉपी / पेस्ट किए बिना किसी भी तत्व में इसे जोड़ने में सक्षम होना चाहते हैं, तो आप ऐसा करने के लिए एक निर्देश बना सकते हैं। यह नीचे के रूप में सरल है:
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कोणीय 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()को संभालते हैं , तब तक उपलब्ध नहीं होता है। मुझे इसे मार्कअप में सही करना था: `(क्लिक करें) =" फू (), $ घटना। स्टॉपप्रोपोगेशन () "
stopPropagationईवेंट पर कॉल करना प्रचार को रोकता है:
(event)="doSomething($event); $event.stopPropagation()"के लिए preventDefaultसिर्फ वापसीfalse
(event)="doSomething($event); false";अंत नहीं है। मैं उसे बदल दूंगा।
false<3
यदि आप किसी ईवेंट के लिए बाध्य हैं, तो केवल गलत तरीके से लौटें:
@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 (इंटरनेट एक्सप्लोरर) के लिए कुछ भी काम नहीं किया। मेरे परीक्षक इसके पीछे के बटन पर पॉपअप विंडो को क्लिक करके मेरे मोडल को तोड़ने में सक्षम थे। इसलिए, मैंने अपने मोडल स्क्रीन डिव पर एक क्लिक के बारे में सुना और पॉपअप बटन पर रीफोकस करने के लिए मजबूर किया।
<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)
}
मैंने सिर्फ एक एंगुलर 6 एप्लिकेशन में चेक किया, ईवेंट.स्टॉपप्रॉपैजेशन () एक इवेंट हैंडलर पर काम करता है, यहां तक कि किसी भी एप को पास किए बिना
(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>
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
लेकिन यह रूटरलिंक के निष्पादन को अक्षम नहीं करता है!
फ़ंक्शन के बाद गलत जोड़ना घटना के प्रचार को रोक देगा
<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']" />