如何在自定义事件中停止事件传播/冒泡

Question

我在我的 Angular 项目中使用来自 Github 的模块项目，它可以让我调整我的 DOM 元素的大小，这些元素绘制在 div 之上，用作绘图板。

为了塑造我的第一个元素，它们是简单的矩形，顺便说一下，我正在使用 mouseDown - mouseMove - mouseUp 组合事件侦听器，然后当我决定调整一个大小时，我将鼠标悬停在边缘并调整其大小。

问题在于调整大小事件，这是 resizestart - resizing - resizeend 的组合，虽然我知道模块正在使用和 mouseDown-Move-Up 事件侦听器并发出提到的事件之前，我无法创建 MouseEvent，而是获得了 ResizeEvent，它没有 stopPropagation() 方法，因此按原样调用它会产生错误（它不是一个函数）。

我需要停止传播，因为当我在绘图板上调整元素的大小时，点击事件会冒泡到直接的父元素，因此我会调整现有元素的大小并同时创建一个新的矩形。

最重要的是，ResizeEvent 甚至不包含类似“event.target”的属性，这让事情变得更糟......

所以，我想知道如何解决这个问题？？

我正在考虑使用 @HostListeners，但是在该指令中执行的代码不会与 Resizable 指令混淆（模块被声明为指令）吗？？

搞乱可调整大小的模块文件听起来不是一个好主意，因为如果有人想使用我的模块，就必须下载我的可调整大小项目的篡改文件...

Answer 1

你的问题的答案是：

event.preventDefault() 将停止默认功能。

我认为这可能会解决您的问题。

event.preventDefault() 方法阻止元素的默认操作发生。

例如：

防止提交按钮提交表单
防止链接跟随 URL

 $(document).ready(function(){
    $("a").click(function(event){
        event.preventDefault();
    });
});