a标签导致的按钮子元素点击无效

文章讲述了在a标签内包裹button时,由于a标签的href属性导致的点击事件问题。尽管尝试了阻止冒泡,但由于a标签的跳转特性,button事件仍被页面刷新覆盖。解决方案是将a标签改为div或移除a标签。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天遇到一个很奇葩的问题,mark一下

我在a标签里面包裹了一个button,点击方法用antd中的气泡弹出窗口,结果就是点击button一点反应都没有。

我还一直以为是冒泡的问题,但是写了阻止冒泡还是不太行,后来以为是antd组件的问题,看了好久的antd代码。

后来去掉a标签或者把a标签换成div标签,问题就解决啦。

我查阅了一下资料,a标签有一个herf属性,点击a标签会进行跳转,点击button也会跳转, 按照事件冒泡的原理,点击button,首先会触发button的点击事件,触发了之后才会触发a标签的跳转,我在a标签的herf中写的是herf='#',这个表示的是,点击a标签,就会跳转到页面的首页,由于我这个页面没有滑动条,其实button点击事件是先触发了,但是紧随其后a标签也跳转了,由于速度过快,button还没有显示,a就已经刷新了,所以看起来就像button并没有触发。

除此之外,即使我写了阻止冒泡,也没办法阻止a标签的刷新。

这个点很重要,记下来,防止忘记,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李喵喵爱豆豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值