点击事件执行两次的解决办法

最新推荐文章于 2023-11-15 11:51:29 发布
最新推荐文章于 2023-11-15 11:51:29 发布
阅读量1.5k 收藏
点赞数
文章标签： javascript html html5 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386335/article/details/104630555
版权

出现点击事件执行两次的原因就是事件冒泡，根据需求这里给出两种解决方法：
1.return false
2.event.stopPropagation()

两种方法是有区别的：
event.stopPropagation()会阻止事件往上冒泡，但并不阻止事件本身；
return false 则是既阻止了事件往上冒泡又阻止了事件本身。

qq_43386335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 给元素绑定click事件多次执行的解决方法
12-11
原绑定方法： $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为： $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑
iScroll中事件点击触发两次解决方案
11-26
之前也看了很多朋友的...这样就形成了头疼的一次点击两次触发。这本来就一个不是问题的问题。之所以说这是个问题，是因为这样是我们不得不去看一看iScroll的源代码。解决这个问题的途径就是拒绝第二次执行函数。而我
label jquery单击一次元素事件被执行了两次
猿学
05-27 274
在做页面时，第一次出现这么奇怪现象，记录下解决方法。 问题：label jquery单击一次元素事件被执行了两次 <label class="checkbox" check="false"> </label> <script> $('.checkbox').click(function(){ let x = $(this).attr("check"); console.log(x); }); </script> 一种修复方法..
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
click按钮点击一次，却执行两次或多次解决方法
u013789737的博客
01-02 3909
我遇到问题时的情况如下： $(".row").on("click",(e)=>{ ....... }) 这里我是用class来定位元素，而在html中，我的这个“row”不只一个，因此，导致了上面这个点击事件重复执行。 解决办法： 将上面的$(".row")改为通过id定位即可 ...
解决Js添加点击事件执行两次问题
Jacky_Long的博客
12-20 1560
在js写组件的时候遇到jQuery操作Dom点击事件的时候执行了两次，使用阻止冒泡e.stopPropagation()，e.preventDefault()，return false都没有用，最后找到方法：用.off().on()，完美解决。 $("xx").off("click","xx").on("click","xx",function() { //.......... }) ...
PyQt 槽函数多次执行的问题
chenzhanpeng_
01-05 344
PyQt 槽函数多次执行的问题。
完美解决DataGridView的OnSelectionChanged执行两次的问题
09-20
这个问题困扰了很多人，在网上也没找到有效的解决...结合网上大神们提供的方法，最终用重写 的方式完美解决DataGridView的OnSelectionChanged事件执行两次的问题。并一同实现了滚轮移动选择数据的方法，也是重写方法。
Jquery on方法绑定事件后执行多次的解决方法
11-24
这两天工作中遇到使用js动态加载内容，同时需要对加入的内容绑定点击事件的，当时想想了想可以使用内联的onclick 来实现，后来没有这样做，使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现，on 对...
pyQt按钮响应函数执行两遍原因
Everyday is a nice day !
03-02 1600
说来惭愧，会执行两遍是因为下面这条语句被写了两遍 self.pushButton_1.clicked.connect(self.on_click_1) 因为使用Qt Designer设定好响应函数后，用PyUIC自动生成的py代码中已经包含了一遍上述语句，然后我又在主文件里面写了一遍，所以会执行两遍，诸如窗口弹出两次……删掉多写的就好了 ...
PyQt,PySide-槽函数被执行了两次
Chiyunyinlong的博客
06-22 489
PyQt,PySide的代码中，槽函数被重复执行了(执行了两次)的解决方案
动画状态机
qq_44400944的博客
10-14 394
1、打开【机器人的动画蓝图】 2、双击状态机。创建两个新的状态 3、将之前【活着的状态】放入【Alive】状态中
Js点击事件执行多次问题解决
Smile__Mo的博客
07-11 7262
当你的点击事件是套在一个事件中的时候，外面的事件执行里面的点击事件会保存当前，如果外面的事件执行了两次当你点击的时候，点击事件就会执行两次。所以要对点击事件进行解绑，防止他存贮之前的事件。具体方法：原绑定方法： 复制代码代码如下:$("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为...
一排cell就第一个cell要点两次才响应，其他的cell都点一下就响应
weixin_30933531的博客
09-21 120
一开始还以为是控件的问题，后来查了下百度，没办法谷歌不能用，结果有人说方法写错了 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath - (void)tableView:didDeselectRowAtIndexPath: 真是可笑至极，而且...
vant 输入框ios端多次点击的问题 100%解决！！！
weixin_43060617的博客
04-20 1107
用vant框架做了个H5问题，在登录的时候就遇到了问题，研究了一下是点击输入框事件问题问题，所以要在index.html 的meta标签修改为 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" /> 亲测有效，剩下的大小用rem调整一下大小...
日常开发遇到的坑click && focus事件 运行2次函数的解决方法
weixin_34184561的博客
11-01 586
目标:同时有 click && focus 只执行一次函数. 问题:首先 click 和 focus 是不同的事件,focus并不能完全替代 click,当同时存在 click 和 focus 事件时,如果产生 click 事件则会同时产生 click 和 focus 2个事件,为了避免运行2次函数,用以下方式使其只运行一次函...
javascript 点击事件执行两次 js 问题
最新发布
fengwuky的博客
11-15 611
利用 js 在页面加载后添加需要点击事件的代码，发现在点击后会代码会执行两次，因为有 toggle 效果，导致弹窗出现又很快丢失。off 函数可以解除由 on 函数所绑定的事件，所以在 js 代码中 on 函数前调用下 off 函数。
uniapp click事件多次点击 settimeout只执行一次
07-08
您好！针对在UniApp中出现点击事件多次触发但setTimeout只执行一次的情况，可能是由于事件绑定和执行的上下文问题导致的。为了解决这个问题，您可以尝试使用闭包或者使用事件修饰符来确保定时器的设置和清除在每次点击事件中都能正确执行。 以下是两种可能的解决方法： 方法一：使用闭包 ```javascript export default { methods: { handleClick() { let timeoutId; return function() { // 清除之前设置的定时器 clearTimeout(timeoutId); // 设置新的定时器 timeoutId = setTimeout(() => { // 执行您想要延迟执行的代码 console.log("Delayed code execution"); }, 1000); }; }, }, }; ``` 在上述示例中，通过使用闭包，每次点击事件触发时都会返回一个新的函数，这个函数中包含了timeoutId变量的私有作用域。这样可以确保每次点击事件都有独立的定时器设置和清除。 方法二：使用事件修饰符 ```html <template> <div @click.stop="handleClick"></div> </template> <script> export default { methods: { handleClick() { // 执行您想要延迟执行的代码 setTimeout(() => { console.log("Delayed code execution"); }, 1000); }, }, }; </script> ``` 在上述示例中，使用了`@click.stop`事件修饰符来阻止事件冒泡。这样可以确保只有最后一次点击事件触发了定时器的设置和执行，避免了多次点击导致的重复执行问题。 希望这些解决方法对您有所帮助！如果您还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值