防止用鼠标事件点击角度2

Question

如何防止从同一元素中的mousedown/mouseup事件派发点击事件？

我已经尝试过evt.preventDefault和evt.stopPropagation，但它似乎没有工作。见例如plunker here

<div> 
    <h2 (click)="onClickToBePrevented()" mouseEvents> 
    Click Here 
    </h2> 
</div> 

指令mouseevents：

@(host: { 
    '(mousedown)': "preventClick($event)", 
    '(mouseup)': "preventClick($event)" 
}) 
preventClick(evt){ 
    evt.preventDefault(); 
    evt.stopPropagation(); 

    return false; 
} 

Answer 1

那你想干什么？ 如果您想显示一个消息框以确认您的解决方案是否正常工作，请在通过mousedown显示消息框之后点击，Click事件未被触发，并且您可以手动触发它。 你不需要调用任何方法来阻止它。 实施例plunker here

@Component({ 
    selector: 'app', 
    template: ` 
<div (click)="onClick()" [confirm]="onClick" 
    confirmMessage="Are you ready!">click me!</div> 
    ` 
}) 
export class AppComponent { 
    onClick() { 
    console.log('Everything you can do'); 
    } 
} 

///

@Directive({ 
selector: `[confirm]` 
    host:{ 
    "(mousedown)":"confirmFirst()", 
    } 
}) 
export class ConfirmDirective { 
    @Input('confirm') onConfirmed: Function =() => {}; 
    @Input() confirmMessage: string = 'Are you sure you want to do this?'; 

    confirmFirst() { 
    const confirmed = window.confirm(this.confirmMessage); 

    if(confirmed) { 
     this.onConfirmed(); 
    } 
    } 
} 

Answer 2

你的指令有效地防止点击鼓泡向父元素，但不是相同的元件。因此，您可以在要防止点击的元素的子组件上使用相同的指令 - 或其修剪版本。

指令：

@Directive({ 
    selector: '[preventClick]', 
    host: { 
    '(click)': "preventClick($event)" 
    } 
}) 
class PreventClick { 
    preventClick(evt){ 
    evt.stopPropagation(); 
    console.log('Click prevented!'); 
    } 
} 

组件：

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2 (click)="onClick()"> 
     <span preventClick>Hello {{name}}</span> 
     </h2> 
     <div>{{clickResult}}</div> 
    </div> 
    `, 
    directives: [PreventClick] 
}) 
export class App { 
    private preventResult:string; 
    private clickResult:string; 

    constructor() { 
    this.name = 'Angular2' 
    this.clickResult = "Try clicking the header" 
    } 

    onClick(){ 
    this.clickResult = "No, it doesn't work :("; 
    } 
} 

见plunker： http://plnkr.co/edit/9Cpt6N?p=preview