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

Posted 2021-05-04

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

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

问题是在resizing事件上，它是resizestart - resizing - resizeend的组合，虽然我知道模块正在使用和mouseDown-Move-Up事件监听器并发出之前提到的事件，但我无法创建MouseEvent，并且相反，我得到ResizeEvent，它没有stopPropagation（）方法，因此调用它会产生错误（它不是一个函数）。

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

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

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

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

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

答案

回答你的问题是：

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

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

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

例如：

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

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