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

最新推荐文章于 2023-06-08 14:07:27 发布
最新推荐文章于 2023-06-08 14:07:27 发布
阅读量820 收藏
点赞数
分类专栏： 个人网站项目错误记录 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41040989/article/details/130071089
版权

今天遇到一个很奇葩的问题，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标签的刷新。

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

qq_41040989
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VC++ MFC 按钮子类化自绘简单范例
09-24
在VC++ MFC(Microsoft Foundation Classes)编程中，按钮子类化自绘是一种常见的技术，用于实现更加个性化和丰富的用户界面。本范例主要讲解如何通过子类化按钮控件并进行自定义绘制，以便在鼠标悬停时改变按钮的样式...
钮子开关
11-23
钮子开关，也被称为拨动开关，是一种常见的电子开关，主要功能是控制电路的通断和切换。在设计上，钮子开关以其简洁的操作方式、可靠的接触性能以及适应多种应用场景而受到广泛欢迎。它们通常被用于家用电器、仪器...
JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件
简单就是美
01-13 1万+
现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。 使用JQuery可以简单地实现，只需要加入如下代码： event.stopPropagation(); 阻止事件冒泡。
解决a标签点击失效问题
weixin_56851586的博客
03-04 905
问题描述：当鼠标移动到退出时，不发生变化且点击没有效果，在我更改样式后。 原因：a标签被其他层级覆盖了 设置a标签样式 a{ z-index: 9999; position: relative; display: inline-block; } 成功
a标签点击不起作用的解决方案
金州饿霸吃不饱的博客
09-09 1万+
.将外层a标签改为行内块级元素即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置，通过调整里层a标签及外层a的z-index大小，使得鼠标能正确选中a标签； 由于产品要求兼容到IE8，所以公司目前使用的是这种方案： 这样通过改变外层a标签的display并调整position及z-index也可以达到a标签嵌套的效果，注意这...
【CSS】链接＜a＞点击不了，点击没反应，可能是被其他元素遮挡住了
早知晓的博客
06-08 1825
有过js控制点击不生效的时候吗，这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到，却无法透过另一元素选中它。
【小5聊】jQuery基础之触发a标签的click事件无效的解决方法
小5聊的博客
07-31 2353
使用trigger触发click事件有时在特定情况下无效，需要使用click方式直接替换 1、代码注入方式无效 在浏览器代码注入，trigger触发click无效，但在console输出区域又可以 代码如下 $(".a").trigger('click'); //一般此类方式都可以触发 2、解决方法代码 $(".a")[0].click(); ...
文件主窗口按钮子窗口可绘制可移动
11-15
在PyQT5中，开发GUI应用程序时，"文件主窗口按钮子窗口可绘制可移动"这一主题涉及到几个关键概念和技术。PyQT5是Python中一个强大的图形用户界面库，它基于Qt库，允许开发者创建丰富的桌面应用。在这个场景中，我们...
三脚钮子开关AD封装库
11-24
本主题涉及的是“三脚钮子开关”的AD封装库，这是一种常见的机械开关类型，常用于电路的开/关控制。下面我们将详细探讨这种开关及其在封装库中的应用。 首先，我们要理解什么是“三脚钮子开关”。钮子开关，...
按钮开关
11-23
按钮开关是一种常见的电气控制元件，主要用于手动操作，通过按下或释放按钮来实现电路的闭合或断开。这种开关在日常生活中以及各种工业、电子设备中广泛应用，因其操作简便、结构紧凑而备受青睐。 首先，按钮开关有...
a标签和阻止事件冒泡
u013558123的博客
10-20 5802
昨天遇到一个奇葩问题，自己在<a>标签里面包了一个<img>标签，在<img>标签上定义了一个方法，点击方法用jqueryUI弹出窗口，结果点击图片的时候能正常的弹出窗口，但是很快一闪就自动关闭了，一直一位是冒泡的问题，但是写了阻止冒泡的方法还不行，后来以为是jqueryUI的问题，折磨了两个小时，最后把方法定义到<a>标签上，问题解决。原来是阻止冒...
button 标签
藏经阁
07-12 987
1.button标签和a标签 button标签包含a标签，则鼠标放在上面时会有下划线 a标签包含button标签 则不会有下划线（也可以用p标签，也可以直接写） 2.button标签可以是 type=“submit” 3.button标签可以在submit的同时运行onclick指定的函数 ...
移动端mui框架中a链接移动端点击不了的问题
DiuDiu_ya的博客
05-11 9227
使用mui框架时，会出现在pc端上a链接可以点击，单移动端点击不了的问题，在 // 初始化数据 var once = '' res.data.alist.data.forEach((v) => { mui('body').on('tap','a',function(){document.location.href=this.href;}); let t
button与a冲突事件
一心一意码代码
07-19 1761
button 与 a 标签 火狐 VS 谷歌
a标签改用button标签
qq_40622253的博客
08-11 1953
&lta href=“xxx”>=
在"a"标签中添加点击事件
热门推荐
l_degege的专栏
05-31 7万+
<a href="javascript:void(0)" onclick="roleupdate()">修改</a> 注：https://www.cnblogs.com/sushu-yaya/p/6811426.html <!DOCTYPE html> <html lang="en"> <head> <meta ch...
a标签点击无响应
vxstar的博客
03-16 690
1、如下代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div{ display: inline-block; width: 200px; height: 200px; position: absolute; border: #000000 2px solid;
点击a标签没反应
高彩琼的博客
05-14 1万+
修改了一下样式，发现a标签点击没反应了，感觉跟没点一样~（正常情况下子元素都在父元素上面，点击a标签，会跳转）检查一下发现是设置a标签的z-index：-1；父元素nav的overflow：hidden时；把a标签全部遮盖住了，所以点击不到a标签，页面才没反应。删除a标签的z-index：-1；属性就解决了...
Vue3父组件点击按钮子组件返回数据
最新发布
10-25
在Vue3中，父组件可以通过props向子组件传递数据，而子组件可以通过emit事件向父组件传递数据。因此，要实现父组件点击按钮子组件返回数据的功能，可以按照以下步骤进行： 1. 在父组件中定义一个数据属性，用于存储子组件返回的数据。 2. 在父组件中使用子组件，并通过props向子组件传递一个方法，用于接收子组件返回的数据。 3. 在子组件中定义一个方法，用于处理点击事件，并通过emit事件向父组件传递数据。 下面是一个示例代码，演示了如何实现父组件点击按钮子组件返回数据的功能： ``` // 父组件 <template> <div> <ChildComponent :handleData="handleData"></ChildComponent> <p>子组件返回的数据：{{ childData }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { childData: '', }; }, methods: { handleData(data) { this.childData = data; }, }, }; </script> // 子组件 <template> <div> <button @click="handleClick">点击返回数据</button> </div> </template> <script> export default { methods: { handleClick() { const data = '这是子组件返回的数据'; this.$emit('handleData', data); }, }, }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qq_41040989

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

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

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

打赏作者

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

抵扣说明：

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

余额充值