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

这篇具有很好参考价值的文章主要介绍了vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

vue为 v-on 提供了 .stop、.prevent、.self、.once等事件修饰符,当遇到子元素与父元素的事件冲突,就要阻止事件传递的产生, .stop 的作用是阻止事件继续传播,所以我们在子元素的事件上添加事件修实符 .stop 来阻止事件传播就能够解决子元素点击事件不触发的问题。文章来源地址https://www.toymoban.com/news/detail-626693.html

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

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

到了这里,关于vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity射线以及相关点击触发事件的归纳

    例如:最近在做一些Unity的小游戏需要,需要用到射线检测和点击事件等操作,虽然都是一些很基础的东西但是也折腾了一会,主要有些细节没处理好就会导致不触发,写篇博客学习记录一下吧。   这个是最常用的,常用于3D游戏中通过射线检测来获取鼠标点击的位置来控

    2024年02月01日
    浏览(33)
  • elementui表格中实现点击单个单元格触发事件

    关键部分 template scope=\\\"scope\\\"       div class=\\\"sub-body\\\" @click=\\\"rePeoplemessageCard(scope.row.name)\\\"{{ scope.row.name }}/div     /template

    2024年01月22日
    浏览(29)
  • 关于使用Echarts来设置地图并触发点击事件

    先上效果图 有坑需要小伙伴们避开,Echarts版本号超过4.9就不能使用地图软件了,所以需要先卸载高版本再安装 配置好后复制就可以看到效果。

    2024年02月11日
    浏览(31)
  • 在input加了disabled属性后,如何触发点击事件?

    input标签 disabled属性说明 被禁用的input标签 既不可用,也不可进行点击 解决方案 使用readonly属性 来替换disabled属性 外套一层父标签,给父标签添加点击事件,并设置input的样式为\\\"pointer-events:none\\\" 去掉鼠标事件,然后通过冒泡触发到父标签上的点击事件。 冒泡事件 点击子标签

    2024年02月10日
    浏览(35)
  • 【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案

    创建地图对象,并添加marker标记,对map和marker均添加了点击事件; body script function initMap() { // 创建地图对象 const map = new HWMapJsSDK.HWMap(document.getElementById(\\\'map\\\'), { center: { lat: 39.36322, lng: 116.3214 }, zoom: 8, }); map.on(\\\'click\\\', handleMapClick); ``` 经下方的Gif图可看出,在点击marker标记时不会

    2023年04月26日
    浏览(41)
  • 微信小程序-如何点击marker触发事件更改图标icon

    最近在做课设,要求实现一个找附近停车位的功能 绿色marker为空闲车位,红色marker为占用车位,现要求实现点击绿色marker,进行上锁操作,并让绿色锁改为红色锁。 如下图所示: 点击中间绿色锁,跳出弹窗,点击关锁,则锁变红色。 倘若点击红色锁的关锁,则会提示 “该

    2024年02月03日
    浏览(48)
  • css - 如何禁用 <a> 标签点击,让 <a> 标签实现 disabled 禁用效果(鼠标无法触发点击事件)

    我们知道a标签是没有disabled属性的,那么我们该如何实现a标签按钮的禁用呢? 给a标签设置 “禁用” 属性,如下代码所示: 这样 @click 点击事件就不会触发了。 使用 jquery:removerAttr() 或者 JS:removeAttribute() 移除 a 标签的 href 属性。 使用 jquery:unbind() 或者 JS:removeEventListe

    2024年01月16日
    浏览(48)
  • vant UI 轮播组件swiper 滑动时触发click点击事件

    问题描述:  如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件 解决办法: 1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。 2..在van-swipe标签添加 :stop-propagation=\\\"false\\\" 属性,阻止滑动

    2024年02月07日
    浏览(34)
  • Objective-C 父元素和子元素的点击事件

    (需求1)pageA一开始是【默认模式】,点击父元素view(包括【搜索】文字),进入【搜索模式】; (需求2)在pageA中,点击【取消】文字时,本身文字修改为【搜索】并且返回【默认模式】   使用UIGestureRecognizerDelegate的gestureRecognizer:shouldReceiveTouch:实现效果

    2024年02月11日
    浏览(30)
  • JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

    js代码,鼠标在页面点击时,记录元素的Xpath 代码:  

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包