<vue click.stop阻止点击事件继续传播的方法
您的当前位置:首页正文

vue click.stop阻止点击事件继续传播的方法

2023-12-07 来源:六三科技网

如下所示:

<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script>

将会先弹出“noclick”,再弹出“dodo”。

 <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script>

只弹出“noclick”

以上这篇vue click.stop阻止点击事件继续传播的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

vue点击锚点事件和监听滚动事件冲突

在 Vue 中,当点击锚点和监听滚动事件之间发生冲突时,可以尝试以下解决方法:

1、停止事件冒泡:在点击锚点的事件处理程序中,使用 event.stopPropagation() 方法来停止事件冒泡。这将阻止点击事件进一步传播到监听滚动事件的元素上。

2、条件判断:在监听滚动事件的处理程序中,通过条件判断来选择是否执行特定的代码。在点击锚点的事件处理程序中,设置 isHandlingAnchorClick 的值为 true,并在适当的时候将其重置为 false。

阻止mpvue小程序change事件冒泡

解决方法:给绑定change事件的元素或组件另外添加@click.stop指向一个空函数,用来阻止冒泡

注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题,项目需要引用小程序的picker选择器组件,发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件(项目需要实现对一个模块进行点击跳转,同时要求模块内的一个子元素有选择器功能)

开始通过查看vue文档和小程序文档,找到两种方法,分别是vue的.stop阻止冒泡和小程序的catch前缀,但通过测试发现给change事件直接添加.stop或者catch没有用

最后选用了网上搜到的一个折中的方法,给picker选择器另外添加一个点击事件(或者给选择器的父元素添加点击事件),为新加的点击事件添加阻止冒泡方法,使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法,欢迎留言

阻止mpvue小程序change事件冒泡

解决方法:给绑定change事件的元素或组件另外添加@click.stop指向一个空函数,用来阻止冒泡

注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题,项目需要引用小程序的picker选择器组件,发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件(项目需要实现对一个模块进行点击跳转,同时要求模块内的一个子元素有选择器功能)

开始通过查看vue文档和小程序文档,找到两种方法,分别是vue的.stop阻止冒泡和小程序的catch前缀,但通过测试发现给change事件直接添加.stop或者catch没有用

最后选用了网上搜到的一个折中的方法,给picker选择器另外添加一个点击事件(或者给选择器的父元素添加点击事件),为新加的点击事件添加阻止冒泡方法,使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法,欢迎留言

vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡,很简单,用stop
<div
@click="test1()">
<span
@click.stop="test2()">按钮1</span>
<span>按钮2</span>
</div>
这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。
以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解vue事件对象、冒泡、阻止默认行为vue绑定的点击事件阻止冒泡的实例

vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡,很简单,用stop
<div
@click="test1()">
<span
@click.stop="test2()">按钮1</span>
<span>按钮2</span>
</div>
这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。
以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解vue事件对象、冒泡、阻止默认行为vue绑定的点击事件阻止冒泡的实例

vue中的事件禁止穿透

在开发过程中遇到下面这个场景,就是页面列表点击需要跳转到相对应的详情页面,如果这个列表内有个按钮点击需要做别的操作比如我需要取消关注,那你点击取消关注的时候,也会触发这个列表的点击事件会跳转到详情,那么我要执行取消关注事件怎么办呢?vue提供的解决方法就是直接在click.stop

这样就可以解决我们遇到的问题了.

vue中的事件冒泡和捕获(stop、capture)

      对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom(捕获过程),然后再从目标的Dom原路传出去(冒泡过程)。通常我们只监听冒泡过程。在vue中,当我们添加了事件修饰符capture后,才会变成捕获。

      这时我们有8个了,在捕获过程和冒泡过程都有监听。输出如下图。

      我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click,focus,blur等;fn是事件触发时将执行的函数方法(function);第三个参数可以不传,默认是false,这个参数控制是否捕获触发。所以我们只穿两个参数时,这个事件是冒泡传递触发的,当第三个参数存在且为true时,事件是捕获传递触发的。

      在不使用任何框架的情况下,我们在js中通过stopPropagation方法阻止事件继续传递。 使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。 我们可以在传递过程中阻止事件继续传递,防止触发不需要的事件。

六三科技网还为您提供以下相关内容希望对您有帮助:

阻止mpvue小程序change事件冒泡

解决方法:给绑定change事件的元素或组件另外添加@click.stop指向一个空函数,用来阻止冒泡 注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑...

vue点击锚点事件和监听滚动事件冲突

在 Vue 中,当点击锚点和监听滚动事件之间发生冲突时,可以尝试以下解决方法:1、停止事件冒泡:在点击锚点的事件处理程序中,使用 event.stopPropagation() 方法来停止事件冒泡。这将阻止点击事件进一步传播到监听滚动事件的元素...

vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡,很简单,用stop 按钮1 按钮2 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了...

使用vue在一个大循环渲染其中的小循环渲染问题

&lt;!-- 阻止单击事件继续传播 --&gt; &lt;!-- 提交事件不再重载页面 --&gt; &lt;!-- 修饰符可以串联 --&gt; &lt;!-- 只有修饰符 --&gt; &lt;!-- 添加事件监听器时使用事件捕获模式 --&gt; &lt;!-- 即元素自身触发的事件先在此处理...

vue中的事件冒泡和捕获(stop、capture)

使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。 我们可以在传递过程中阻止事件继续传递,防止触发不需要的事件。

vue常见面试题

&lt;av-on:click.stop="doThis"&gt;&lt;!-- 阻止单击事件继续传播 --&gt; &lt;formv-on:submit.prevent="onSubmit"&gt; &lt;!-- 提交事件不再重载页面 --&gt; &lt;av-on:click.stop.prevent="doThat"&gt; &lt;!-- 修饰符可以串联 --&gt; &lt;formv-...

vue5 v-model详解,绑定事件,修饰符,深度响应式

鼠标左键单击 @click =" 方法 " ;鼠标右键单击 @contextmenu =" 方法 " ;鼠标左键双击 @dblclick =" 方法 " ;一般我们在方法中通过 e.preventdefault( ) 来 阻止默认行为 ,在vue中,通过事件修饰符...

vue app左右滑动页面内有拖动事件互相干扰怎么办

Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式,因为Vue服务的是IE9以上的现代浏览器,他们也都是支持DOM2级事件。因此下例中实际上相当于el.addEventListener('click',func)所以addEventListener支持绑定的事件,v-on指令...

Vue生命周期及钩子函数

实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。 被keep-alive 缓存的组件激活时调用。被keep-alive 缓存的组件停用时调用。当捕获一个来自子孙...

vue 的点击事件怎么获取当前点击的元素

一、首先,在编辑器中创建一个web项目,并在目录中创建一个新的静态页面buttonclick.html:二、然后在title标签中介绍准备好的vue.js库文件。在这里,将JS文件放在JS目录中,然后在body标记中插入一个div和四个按钮,将...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top