如何在自定义事件中停止事件 propagation/bubbling

Question

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

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

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

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

最重要的是，ResizeEvent 甚至不包含 "event.target"-like 属性，这让事情变得更糟...

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

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

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

Answer 1

您问题的答案是：

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

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

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

例如：

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

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

如何在自定义事件中停止事件 propagation/bubbling

How to stop event propagation/bubbling in custom events

javascript

angular

github

module

resizable