javascript - 如何停止自定义事件中的事件传播/冒泡

Question

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

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

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

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

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

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

我正在考虑使用@HostListeners，但是在该指令中执行的代码不会与可调整大小指令(该模块被声明为指令)混淆吗？？

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

Answer 1

您的问题的答案是:

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

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

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

例如:

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

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