vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发

在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？

解决方法：使用vue中的事件修饰符

vue为 v-on 提供了 .stop、.prevent、.self、.once等事件修饰符，当遇到子元素与父元素的事件冲突，就要阻止事件传递的产生， .stop 的作用是阻止事件继续传播，所以我们在子元素的事件上添加事件修实符 .stop 来阻止事件传播就能够解决子元素点击事件不触发的问题。

<div class="face-header" v-on:click="handleChange"><div class="title" v-on:click.stop="openDetail">订单版本：v1.0.0</div>
</div>

总结：在vue项目开发中，vue为我们提供了很多实用的方法，做项目时一定要冷静下来，多思考。

vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发相关推荐

vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue点击事件，循环出来的关注列表，点击只关注其中一个并改变样式
vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template><ul ...
【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
android按钮防止重复点击事件,实例详解Android解决按钮重复点击问题
为了防止用户或者测试MM疯狂的点击某个button,写个方法防止按钮连续点击.具体实例代码如下所示: public class BaseActivity extends Activity { prot ...
[js] 在DOM上同时绑定两个点击事件（一个用捕获，一个用冒泡），事件总共会执行几次，先执行哪个事件？
[js] 在DOM上同时绑定两个点击事件(一个用捕获,一个用冒泡),事件总共会执行几次,先执行哪个事件? 两次先捕获,后冒泡个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
java多次点击时事件_click事件的累加绑定，绑定一次点击事件，执行多次
我的github(PS:希望star):https://github.com/thWinterSun/v-admin 最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素 ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
android 点击文本框,android 文本框部分文字的点击事件
转载请标明出处. android文本框部分文字点击事件. String text1 = "这是个例子"; String text2 = "点击的文字"; Spa ...

vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发

解决方法：使用vue中的事件修饰符

总结：在vue项目开发中，vue为我们提供了很多实用的方法，做项目时一定要冷静下来，多思考。

vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发相关推荐

最新文章

热门文章

vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发

解决方法：使用vue中的事件修饰符

总结：在vue项目开发中，vue为我们提供了很多实用的方法，做项目时一定要冷静下来，多思考。

vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发相关推荐

最新文章

热门文章

vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发

vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发相关推荐