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

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();
    });
});