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

最新推荐文章于 2022-07-23 12:32:22 发布
最新推荐文章于 2022-07-23 12:32:22 发布
阅读量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事件还是触发两次??
莫小猪的菜鸟进阶路
07-21 290
今天接到一个移交过来的项目, 发现Bug是有一个click事件会触发两次。 我第一反应：是不是没有阻止冒泡？然而是添加了preventDefault的。 最后通过debug和读完源代码，才发现click监听事件被绑定了两次。 当然正常情况下，没人会傻到给同一个元素添加两次监听事件。但是项目参与的人多了，杂了就很容易出现这种情况。如果你找不到重复添加监听事件的位置，或者不知道应该删除哪个的时候。可以用这个方法。希望能帮到同样掉坑的盆友节约时间。 e.stopImmediatePropagation() //阻
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> 一种修复方法..
解决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() { //.......... }) ...
Js点击事件执行多次问题解决
Smile__Mo的博客
07-11 7269
当你的点击事件是套在一个事件中的时候，外面的事件执行里面的点击事件会保存当前，如果外面的事件执行了两次当你点击的时候，点击事件就会执行两次。所以要对点击事件进行解绑，防止他存贮之前的事件。具体方法：原绑定方法： 复制代码代码如下:$("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为...
前端的事件冒泡（例如点击一次onclick事件执行两次）解决办法
weixin_34403693的博客
11-20 3270
问题概要： 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value，同时也绑定不上onclick等事件。举个例子： 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 ...
浏览器全屏，按下两次esc方法的解决思路
gansu12的博客
07-23 842
浏览器全屏，按下两次esc方法的解决思路
iScroll中事件点击触发两次解决方案
11-26
之前也看了很多朋友的...这样就形成了头疼的一次点击两次触发。这本来就一个不是问题的问题。之所以说这是个问题，是因为这样是我们不得不去看一看iScroll的源代码。解决这个问题的途径就是拒绝第二次执行函数。而我
完美解决DataGridView的OnSelectionChanged执行两次的问题
09-20
这个问题困扰了很多人，在网上也没找到有效的解决...结合网上大神们提供的方法，最终用重写 的方式完美解决DataGridView的OnSelectionChanged事件执行两次的问题。并一同实现了滚轮移动选择数据的方法，也是重写方法。
Jquery on方法绑定事件后执行多次的解决方法
11-24
这两天工作中遇到使用js动态加载内容，同时需要对加入的内容绑定点击事件的，当时想想了想可以使用内联的onclick 来实现，后来没有这样做，使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现，on 对...
JQuery 给元素绑定click事件多次执行的解决方法
10-25
本篇文章将详细介绍如何解决jQuery中元素click事件多次执行的问题。 首先，我们需要理解jQuery中的事件绑定机制。jQuery提供了`.on()`方法来绑定事件，例如： ```javascript $("#sdfsd").on("click", function(e) ...
解决dispatchKeyEvent监听执行两次
艾边程的博客
04-27 5249
重写dispatchKeyEvent方法 按返回键back 执行两次的解决方法 @Overridepublic boolean dispatchKeyEvent(KeyEvent event) {　　　if(event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAction() != KeyEvent.ACTION_UP)
jQuery阻止冒泡事件（单击事件执行了两次或多次）
HaleyTiger的博客
10-14 519
event.stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播 一、第一种（亲测） $(“selector…”).stopPropagation(); 二、第二种（暂未测） （1）先解绑事件 $(“selector…”).unbind(); 注： 切记unbind()中不要写具体的事件名，不然无法解决冒泡事件。 （2）再重新绑定事件 ...
前端冒泡事件，导致一次动作触发多次事件（例如click）
BluerCat的博客
11-03 830
背景：最近突然发现一个奇妙的东西，那就是你点击一次按钮，触发一次事件，第二次点击，触发两次，第三次点击，触发三次。。。。。。 最终想起来了，之前弄canvas画布的时候，搞鼠标监听，大佬和我说过冒泡事件，当时使用e.preventDefault()，禁用默认事件。 阻止冒泡事件的方法： 方法一：使用.off(‘click’) $('#signatureAgreeSignBtn').off('click').click(function() {}); 方法二：使用e.stopPropagation() $(
click按钮点击一次，却执行两次或多次解决方法
u013789737的博客
01-02 3913
我遇到问题时的情况如下： $(".row").on("click",(e)=>{ ....... }) 这里我是用class来定位元素，而在html中，我的这个“row”不只一个，因此，导致了上面这个点击事件重复执行。 解决办法： 将上面的$(".row")改为通过id定位即可 ...
jstree点击一次执行两次的问题
qq_40597889的博客
09-17 1549
jstree点击一次执行两次的问题 应产品需求，用jstree写了一个tree，但是却有一个bug，记录一下bug的修改过程及方法，希望可以帮助更多的人 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl ...
前端--click单双击问题及函数节流与防抖问题
cc_Future的博客
10-17 2265
不折腾的前端，和咸鱼有什么区别 本篇博客，我们将探讨2个问题，click单双击问题及函数节流与防抖问题，其实都是关于click事件的探讨，当我们对一个按钮进行单击或者双击，或者多次点击，当我们频繁触发click事件时，这时就涉及到我们的函数节流与防抖问题。 单双击（仿双击） 在js中，同一个功能块可能会遇到单击、双击事件两种事件，当我们执行双击事件时，同时也执行了2次单击事件。任何避免执...
Android v1、v2、v3签名
云梦九章～
11-05 9674
什么是Android签名 了解 HTTPS 通信的同学都知道，在消息通信时，必须至少解决两个问题：一是确保消息来源的真实性，二是确保消息不会被第三方篡改。 同理，在安装 apk 时，同样也需要确保 apk 来源的真实性，以及 apk 没有被第三方篡改。为了解决这一问题，Android官方要求开发者对 apk 进行签名，而签名就是对apk进行加密的过程。要了解如何实现签名，需要了解两个基本概念：消息摘要、数字签名和数字证书。 消息摘要 消息摘要（Message Digest），又称数字摘要（Digital D
解决label点击事件触发两次问题
wangchaoqi1985的博客
06-24 387
解决label点击事件触发两次问题
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、付费专栏及课程。

余额充值