如何解决点击一个点击事件 触发多个点击事件 冒泡事件

最新推荐文章于 2023-06-12 14:23:24 发布
原创 最新推荐文章于 2023-06-12 14:23:24 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在处理DOM事件时如何使用event.stopPropagation()来防止事件冒泡，确保只有目标元素响应点击事件，而不触发其父级元素的事件处理器。

 工作日志 仅供参考

 

<div class="demo1>
   <div class=demo2>我的demo2</div>
</div>


//当demo2 和demo1 同时都绑定点击事件的时候 当你点击子元素demo2的时候会触发父元素demo1 的点击事件
说明发生了冒泡事件（冒泡事件自行去百度）  解决方法是 event.stopPropagation() 阻止冒泡事件的触发 也就是说当你点击子元素demo2的时候不会去触发demo1的点击事件


$(document).on("click",".demo2",function(event){
   event.stopPropagation();

下面写正常些就可以了
})

 

css pointer-events 多层鼠标点击事件
w710537643的博客
02-19 515
threejs 无法滑动视角，菜单界面覆盖threejs操作事件。
vue3中使用TcPlayer实现视频监控-代码
站在巨人的肩膀上前行
04-14 1936
这里主要是监控画面的布局通过点击按钮使用grid布局进行切换，tcplayer.js的初始化就不展示了。在index.html头部引入引入播放器的cdn。
h5集成腾讯云播放器tcplayer遇到的坑
gw6601的博客
06-12 1551
需要注意的是，腾讯云播放器使用了video标签，在全屏状态下,会新建图层位于最高级别，需要获取图层标签，动态添加按钮和标题。1、腾讯云播放器没有提供Controls的显示/隐藏监听，需要自己添加监听事件。3、根据控制栏联动播放器顶部标题和返回按钮。2、根据控制栏动态显示倍速提示框。
点击事件问题（点一个触发多个）
体验Android编程之美
03-13 861
问题：在做点击头像背景时，出现两个触发事件，跳出相册选择，同事也finish掉 解决：找了很久都没找到问题所在，以为是控件的覆盖范围的问题，从而百度寻找冲突解决的方法，但是没有解决掉。             后来无意发现点击按钮没有加 break; 一恨死
一个按钮触发两个事件
热门推荐
肖肖肖丽珠的博客
12-31 2万+
点击一个按钮 分别触发两个事件 点击 点击第一次的时候  $("button").click(function(){   $("p").css({"background-color":"red","font-size":"200%"});   }); 在点击第二次的时候  $("button").click(function(){   $("p").css({"displa
多次注册事件会导致一个事件被触发多次的解决方法
09-05
然而，如果不加控制地多次注册同一个事件处理器，可能会导致该事件被触发多次，这不仅消耗资源，还可能导致预期外的行为。这个问题在给定的描述中尤为突出，它涉及到一个按钮的`click`事件被反复注册，从而在单击时...
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
10-20
当父子DOM元素都绑定了多个点击事件，分别设置在捕获和冒泡阶段时，其执行顺序如下： 1. 按照代码顺序，先触发所有捕获阶段的事件监听器。 2. 然后是目标元素的事件监听器（即在冒泡和捕获阶段都绑定了监听器的情况...
jquery mobile的触控点击事件会多次触发问题的解决方法
10-25
在jQuery Mobile中，一个tap事件可以由用户轻触屏幕时触发，而有时用户可能无意中触发了多次tap事件，特别是当用户快速连续点击屏幕时。这种现象在Windows 8触控设备和Android设备上尤为常见。在某些情况下，tap事件...
javascript触发模拟鼠标点击事件
10-16
在这段代码中，`attachEvent`方法用于在指定元素上绑定事件处理函数，`createEventObject`用于创建一个事件对象实例，然后`fireEvent`方法触发指定的事件。 而对于现代浏览器，如Chrome和Firefox，它们使用`...
vue可以同时有2个点击事件吗_在Vue组件中获取全局的点击事件方法
weixin_35500243的博客
01-30 1979
使用场景：在Vue组件中点击某元素之外的地方移除该元素需求：如上图所示，“用户列表”页面有三个Vue组件组成，分别是“菜单组件”，“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一：出现“下拉菜单”的同时，建一个透明的遮罩层，然后只有“下拉菜单”可以点，点击遮罩层就隐藏。缺点：z-index层数要控制好，还有就是如果点击其他...
完美解决一个事件激活多个函数
lne818的专栏
06-26 838
如果你的网页中一个“OnLoad”事件要激活两个以上的JavaScript函数，那怎么办呢？小阳曾查阅了不少资料，结果都不尽如人意，无非是程序员根据情况，把要激活的函数统一放在一个函数里激活。但作为一个程序员，编写的代码的适用性是很重要的。请看下面一个例子：标签调用的函数")>function myfunction(){alert("这是JS脚本调用的函数");}document.body.on
解决div中嵌套元素时，二者点击事件同时触发
weixin_30883311的博客
12-06 911
以Angualr为例： <div class="previewImg" (click)="closeImg()"> <img id="leftArrow" *ngIf="mid > left" (click)="leftImg($event)" src="../../../assets/community/leftArrow@3x.png"/> ...
cocos2d-x Touch事件冒泡
weixin_30471561的博客
05-17 252
先看看这里注册事件方法 CCDirector* pDirector = CCDirector::sharedDirector(); pDirector->getTouchDispatcher()->addTargetedDelegate(this, -1, true); 上面的－1就是事件的优先级，越小优先级越高 bool PVPLogin::ccTouchBegan(CCTo...
取消事件冒泡（多个事件重复发生）
郑长风
11-26 1014
 在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。 无标题文档<!--*{ margin:0; padding:0;}-->*{ margin:0; padding
阻止 antd Popover弹框 点击事件冒泡
风小猪的博客
04-11 3741
设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。
vue中两个div均有click时间且div重合_Vue中组件通信的方式
weixin_42316909的博客
02-04 1116
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要；我们常用的方式莫过于通过props传值给子组件，但是vue还有其他很多不常用的通信方式，了解他们，也许在以后在写代码的时候能给你带来更多的思路和选择。prop/$emit父组件通过prop的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。//Parent.vue <template> &lt...
一个点击事件中还有另一个点击事件，点击里面的那个两个都触发了
qq_34447091的博客
08-02 949
点击一个按钮触发不同的事件
a515557595_xzb的博客
02-07 5122
1、点击同一个按钮想要触发不同的事件，比较简单的方法是改变标签被属性的值，下面以a标签为例。 2、目前触发的事件是addComment()，若想触发reply()事件，则可以通过以下方式： HTML： 回复JS： function switchPostMsg(photoId,commentId){ $("#switchA").attr("onclick","reply('"+phot
javascript时间冒泡和事件捕获
qq_33418050的博客
08-17 703
事件冒泡，事件按从指定对象触发到document对象的顺序触发。 事件捕获，事件按从document对象到指定目标对象的顺序触发。 阻止事件冒泡，函数传入event参数，函数体中使用e.stopPropagation();阻止事件向上冒泡。 this，e.target和e.currentTarget区别 js事件是会向上冒泡的，所以this是可以变化的，但e.target不会向上冒
uniapp的view上有两个点击事件，如何只触发一个
最新发布
06-13
<think>我们正在解决UniApp中view上存在两个点击事件时只触发一个的问题。根据引用内容，我们注意到在微信小程序中，类似的问题（bindtap和bindmarkertap同时触发）是通过节流或设置判断标识来解决的。在Vue项目中也有提到点击事件无效的问题，但这里我们主要关注事件同时触发的问题。另外，引用3和4提到了uniapp中的滚动事件和页面滚动设置，但与我们当前的问题关联不大。因此，我们可以借鉴微信小程序中的解决方案，在UniApp中采用类似的方法。具体思路：1.节流（throttle）：在一定时间内只允许触发一次事件，但这可能无法完全解决两个事件同时触发的问题，因为两个事件可能在同一时间点触发。2.设置判断标识：在触发第一个事件时设置一个标识，然后在第二个事件中判断该标识，如果已经触发过，则不再执行。但是，在UniApp中，我们通常使用`@click`来绑定事件，所以我们可以通过以下方式之一：方法一：使用事件修饰符（如.stop）阻止事件冒泡-如果两个事件是嵌套关系，我们可以尝试在内层事件上使用`.stop`修饰符阻止事件冒泡，这样外层事件就不会被触发。-例如：`<view@click="outer"><view@click.stop="inner"></view></view>`，这样点击内层view只会触发inner事件。方法二：在事件处理函数中通过条件判断-如果两个事件不是嵌套关系，或者无法通过阻止冒泡解决，我们可以在事件处理函数中设置一个共享的变量（如flag）来控制。-例如：在第一个事件触发时，设置一个flag为true，然后在第二个事件中判断flag，如果为true则跳过执行，并在合适的时机（比如使用setTimeout）重置flag。方法三：利用事件对象（event）中的target和currentTarget-在事件处理函数中，我们可以通过事件对象来判断点击的是哪个元素，从而决定是否执行。-例如：如果两个事件绑定在同一个元素上，我们可以通过判断事件的目标（target）和当前绑定的元素（currentTarget）是否一致，或者根据target的class/id等属性来判断。方法四：使用capture捕获模式（不常用，但也可以尝试）-在事件捕获阶段处理事件，然后阻止事件继续传播。根据问题描述，用户提到“view上存在两个点击事件”，可能是同一个元素绑定了两个事件，也可能是嵌套元素分别绑定了事件。假设场景1：同一个元素绑定了两个事件处理函数-这种情况，我们无法阻止两个函数都被调用，但我们可以通过一个全局变量或状态来控制逻辑只执行一次。假设场景2：嵌套元素，父元素和子元素分别绑定了事件-这时，点击子元素会冒泡到父元素，所以两个事件都会触发。我们可以使用`.stop`修饰符阻止子元素事件冒泡。具体实现：场景1：同一个元素两个事件处理函数```html<view@click="handler1"@click="handler2"></view>```在UniApp中，同一个元素绑定多个事件处理函数是允许的，且会按照顺序执行。如果我们只想触发其中一个，可以在第一个事件中通过event.stopPropagation()（但注意在非浏览器环境中可能不支持）或者通过一个标志位来阻止第二个事件的逻辑。但是，在Vue模板中，同一个事件类型绑定多个处理函数，无法直接通过修饰符来阻止后续处理函数的执行。因此，我们可以考虑合并事件处理函数：```html<view@click="combinedHandler"></view>```然后在combinedHandler中按条件执行。场景2：嵌套元素```html<view@click="outer"><view@click="inner"></view></view>```解决：在内层view上使用`.stop`修饰符```html<view@click="outer"><view@click.stop="inner"></view></view>```如果用户的问题更复杂，比如两个事件分别绑定在相邻或重叠的元素上，那么可能需要通过条件判断来避免同时触发。根据引用[1]中提到的设置判断标识的方法，我们可以这样实现（适用于场景1或两个事件独立的情况）：步骤：1.在data中定义一个变量，例如`isTriggered`，初始化为false。2.在第一个事件处理函数中，设置`isTriggered=true`，并执行第一个事件需要的逻辑。3.在第二个事件处理函数中，首先检查`isTriggered`，如果为true，则直接返回（不执行逻辑），然后重置`isTriggered`为false（或者使用setTimeout在下一个事件循环重置）。4.注意：如果两个事件是独立的，可能第一个事件触发后，第二个事件在下一个时刻触发，那么我们需要在第一个事件触发后，延迟一小段时间重置标志。或者，我们可以在每次事件循环结束后重置。但是，这种方法可能会有一个问题：如果第一个事件触发后，第二个事件因为某种原因没有被触发，那么标志位将一直为true，导致后续第二个事件无法触发。所以我们可以使用setTimeout来重置。示例代码：```html<template><view@click="handleClick1"@click="handleClick2">点击区域</view></template><script>exportdefault{data(){return{clickFlag:false}},methods:{handleClick1(){//执行第一个点击事件的逻辑console.log('事件1触发');this.clickFlag=true;//延迟重置标志setTimeout(()=>{this.clickFlag=false;},100);},handleClick2(){//如果第一个事件已经触发，则跳过if(this.clickFlag){console.log('事件2被阻止');return;}//否则执行第二个事件的逻辑console.log('事件2触发');}}}</script>```注意：由于两个事件处理函数都会执行，所以我们在handleClick2中通过标志位来避免执行逻辑。但是，如果两个事件处理函数的执行顺序不确定（Vue中同一个元素的事件处理函数按绑定顺序执行），那么我们需要确保handleClick1先于handleClick2绑定。不过，在模板中，先写的事件处理函数先绑定，所以handleClick1会先执行。但是，这种方法在事件触发时，两个函数都会执行，只是第二个函数中的逻辑被跳过。如果两个事件处理函数的执行顺序相反，那么我们需要调整判断逻辑。另一种思路：只绑定一个事件处理函数，在这个函数中根据条件来决定执行哪个逻辑。总结：根据具体情况选择方法。因此，针对用户的问题，我们提供以下两种解决方案（根据实际情况选择）：方案一：使用事件修饰符（适用于嵌套元素）-如果是父子元素关系，使用`.stop`修饰符阻止子元素事件冒泡。方案二：使用标志位（适用于同一个元素或两个独立元素）-在事件处理函数中通过标志位控制，确保只触发一次逻辑。另外，还可以考虑使用事件委托，在父元素上统一处理，然后根据事件目标来区分。用户的问题描述是“view上存在两个点击事件”，没有说明是同一个view还是嵌套view，所以我们提供两种方案供用户选择。最后，请注意UniApp中事件处理的机制与微信小程序类似，因为UniApp最终编译到小程序平台。所以引用[1]中的解决方案同样适用。根据以上分析，我们给出如下回答：</think>在UniApp中解决同一元素上两个点击事件同时触发的问题，可以通过以下方案实现。核心思路是**控制事件冒泡**或**添加条件判断**，以下是具体方法： --- ### 方案一：阻止事件冒泡（推荐） 通过事件修饰符`.stop`阻止事件向上冒泡，确保只触发目标事件： ```html <!-- 外层元素 --> <view @click="outerEvent"> <!-- 内层元素：添加.stop修饰符阻止冒泡 --> <view @click.stop="innerEvent">点击区域</view> </view> ``` **效果**： 点击内层元素时，仅触发`innerEvent`，不会触发外层的`outerEvent`。 --- ### 方案二：条件判断控制触发 通过状态变量控制事件执行逻辑： ```html <view @click="handleClick">点击区域</view> ``` ```javascript data() { return { eventTriggered: false // 状态标识 } }, methods: { handleClick() { if (this.eventTriggered) return; // 已触发则跳过 // 执行第一个事件的逻辑 console.log("主事件触发"); this.eventTriggered = true; // 重置状态（可选延迟） setTimeout(() => this.eventTriggered = false, 300); }, // 其他事件（如通过不同条件触发） otherEvent() { if (!this.eventTriggered) { console.log("备用事件触发"); } } } ``` --- ### 方案三：事件委托 + 目标判断 通过`event.target`区分触发源： ```html <view @click="handleEvent"> <view id="targetA">区域A</view> <view id="targetB">区域B</view> </view> ``` ```javascript methods: { handleEvent(e) { const targetId = e.target.id; if (targetId === 'targetA') { console.log("区域A事件"); } else if (targetId === 'targetB') { console.log("区域B事件"); } } } ``` --- ### 方案四：节流函数控制 使用节流（throttle）限制事件触发频率： ```javascript import { throttle } from 'lodash'; methods: { // 主事件（500ms内仅触发一次） primaryEvent: throttle(function() { console.log("主事件执行"); }, 500), // 备用事件（不受影响） secondaryEvent() { console.log("备用事件执行"); } } ``` --- ### **关键注意事项** 1. **事件顺序**：UniApp中事件按声明顺序执行，优先触发的逻辑应放在前面。 2. **平台差异**：真机环境事件冒泡机制更严格，务必在真机测试。 3. **复杂场景**：对于深层嵌套元素，结合使用`.stop`和条件判断更可靠。 > 参考解决方案：微信小程序中类似问题通过节流或状态标识解决[^1]，Vue项目中需注意事件绑定有效性[^2]。 --- ### 总结建议 - **嵌套元素** → 优先使用 **`.stop`修饰符**（方案一） - **同一元素** → 采用 **条件判断**（方案二）或 **节流控制**（方案四） - **动态区域** → 使用 **事件委托**（方案三） 测试时请使用真机调试，确保多端兼容性。如问题复杂，可结合多种方案实现精确控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值