子级a标签href避免触发父级onclick的方法,子元素阻止冒泡
文章摘要
HeoGPT
这篇文章介绍了如何避免子级a标签href触发父级onclick事件的方法,以及如何阻止子元素的点击事件冒泡。作者分享了具体的代码实现,方便读者在开发网页前端时使用。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉因为点击超链接是个特别麻烦的事情,需要鼠标移动到指定的标题才可以(这真的是太累了)。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick
的方式来添加跳转。但是这就出现了一个问题,点击标签的时候会从子元素的事件触发一遍,然后再触发父元素事件。也就是说点击标签的时候会跳转两个页面。
如何解决这个问题呢?
添加事件
给子元素添加下面的onclick事件:
1 | window.event.cancelBubble=true; |
可以阻止子元素的点击事件触发父元素的事件。我们使用html的时候可以添加:
1 | onclick="window.event.cancelBubble=true;" |
完整例子(子元素):
1 | <a class="article-meta__tags" href="/tags/%E5%BF%85%E7%9C%8B/" event.cancelbubble="" onclick="window.event.cancelBubble=true;" data-pjax-state="">#必看</a> |
附
pug代码
1 | onclick=`window.event.cancelBubble=true;` |
- 感谢你赐予我前进的力量
打赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 张洪Heo
评论
生成评论
匿名评论
违规举报
✅ 你无需删除空行,直接评论以获取最佳展示效果