时间戳

首页 > 解决方案 > 在Angular中移动鼠标时如何取消单击事件？

angular - 在Angular中移动鼠标时如何取消单击事件？

问题描述

我已经尝试了一段时间，但我无法使其工作。

我有一个带有(click)关联方法的元素：

<span class="item-name" (click)="onClickElement(element.id)">{{element.name}}</span>

哪个导航到另一个页面：

onClickElement( id: number){    
    if(id){
      this.router.navigate(['/some-url', id]);
    }
  }

这按预期工作，但是如果用户想要选择里面的文本element.name来复制文本，如果他点击它并移动鼠标进行选择，当他释放按钮时将被转发到页面。让他回去，不得不重新加载它所在的桌子。这使得它对用户来说很烦人。

我尝试添加$event到该(click)方法但没有成功，但我找不到任何东西来“取消”该操作，例如使用stopPropagation.

我还看到了一些其他的绑定(mouseup)和（mousedown），可能每个人都在计算您单击的坐标以查看鼠标是否已移动，但他看起来真的很脏，因为它可能需要很多代码行和实现这一点的多种功能，也让 HTML 安静“饱满”。

我可以在 onClickElement 方法中做些什么来防止这个问题吗？

问题示例，如果单击外部没有重定向，但如果单击内部并拖动它会转发（白屏表示下一页）： 例子

标签： angularselectonclickmouseevent

解决方案

基本上你需要做两件事。首先，您必须将 传递$event给您的方法，以便您可以preventdefault()在其上调用该方法。

在您的模板中

<span class="item-name" (click)="onClickElement($event, element.id)">.     {{element.name}}
</span>

在您的组件中

onClickElement(event: MouseEvent, id: number){ 
    event.preventDefault()   
    if(id){
      this.router.navigate(['/some-url', id]);
    }
  }

推荐阅读