问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Howto：带有onclick的div在另一个带有onclick javascript的div中

社区维基
1
新手上路，请多包涵

只是一个简单的问题。我在 div 与彼此之间的 onclick javascript 之间遇到问题。当我点击内部 div 时，它应该只触发它的 onclick javascript，但外部 div 的 javascript 也被触发。用户如何在不触发外部 div 的 javascript 的情况下单击内部 div？

 <html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>

原文由 Daniel Brink 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlonclick
阅读 221
2 个回答
得票最新
社区维基
1
✓ 已被采纳

javascript 中基本上有两种事件模型。 事件捕获 和 事件冒泡。在事件冒泡中，如果您单击内部 div，则首先触发内部 div 的单击事件，然后触发外部 div 的单击事件。在事件捕获中，首先触发外部 div 事件，然后触发内部 div 事件。要停止事件传播，请在您的点击方法中使用此代码。

    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

原文由 Adeel 发布，翻译遵循 CC BY-SA 2.5 许可协议

社区维基
1

在 此处 查看有关事件传播的信息

特别是，您需要在事件处理程序中使用这样的代码来阻止事件传播：

 function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

原文由 Tim Goodman 发布，翻译遵循 CC BY-SA 2.5 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题