const container= document.getElementById("container")
const path = document.getElementById("myPath")

path.onclick = (event) => {
    event.stopPropagation() // not working
    console.log("path clicked !")
    }
    
container.onmousedown = (event) => {
    console.log("container clicked !")
    }
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path id="myPath" d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="5" />
</svg>
</div>

当我点击到path时,不工作event.stopPropagation().我只想跑alert("Path clicked !")米.但同时运行两个监听程序.这些代码的问题出在哪里?

推荐答案

stopPropagation()可以正常工作--它会停止the same type的事件传播,因此您需要将事件处理程序更改为onclickonmousedown.

const container= document.getElementById("container")
const path = document.getElementById("myPath")

container.onclick = (event) => {
    console.log("container clicked !")
    }

path.onclick = (event) => {
    event.stopPropagation()
    console.log("path clicked !")
    }
    
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path id="myPath" d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="5" />
</svg>
</div>

Javascript相关问答推荐

即使设置了父级的最大高度,固定位置的分区内容也不会滚动?

JS生成具有给定数字和幻灯片计数的数组子集

react 路由加载程序行为

每次子路由重定向都会调用父加载器函数

如何才能拥有在jQuery终端中执行命令的链接?

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

. NET中Unix时间转换为日期时间的奇怪行为

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

如何在JAVASCRIPT中临时删除eventListener?

使用Document.Evaluate() Select 一个包含撇号的HTML元素

删除元素属性或样式属性的首选方法

在表单集中保存更改时删除';禁用';

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

在GraphQL解析器中修改上下文值

用Reaction-RT-Chart创建实时条形图

使用props 将VUE 3组件导入JS文件

使用静态函数保存 node 前的钩子