-
北巷长歌悠2021-11-27 09:09
- 32
- 0
子元素会触发父元素的drag，如何阻止呢？求解！！！DOM 结构如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>drag</title> </head> <body> <div id="father" draggable="true" style="width: 200px; height: 200px; background: red" > <div draggable="false" id="child" style="width: 50px; height: 50px; background: blue" ></div> </div> <script> const father = document.querySelector("#father"); const child = document.querySelector("#child"); child.addEventListener("click", (e) => { console.log("child click"); e.stopPropagation(); }); child.addEventListener("dragstart", (e) => { e.stopPropagation(); }); child.addEventListener("drag", (e) => { e.stopPropagation(); }); // ================= father.addEventListener("click", (e) => { console.log("father click"); }); father.addEventListener("dragstart", (e) => { console.log("father dragstart"); }); father.addEventListener("drag", (e) => { console.log("father drag"); }); father.addEventListener("dragover", (e) => { // console.log("father dragover"); }); father.addEventListener("dragend", (e) => { console.log("father dragend"); }); </script> </body></html>
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
残笑丶何相忘 普通会员 1楼
在JavaScript中，可以通过调用
event.stopPropagation()方法来阻止drag事件冒泡。以下是一个示例：javascript element.addEventListener('dragstart', function(event) { event.stopPropagation(); // 其他drag事件处理代码... }, false);在这个例子中，当dragstart事件在
element上触发时，事件将不会向上冒泡到其任何父元素。同样的方法也可以应用于其他drag相关事件，如'drag', 'dragover', 'dragend'等。注意：
event.preventDefault()方法用于阻止事件的默认行为，而不是阻止事件冒泡，这一点需要区分清楚。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部