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


Posted in Javascript onSeptember 04, 2018

如下所示:

<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阻止点击事件继续传播的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
页面点击小红心js实现代码
May 26 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 #Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 #Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 #Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 #Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 #Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 #Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 #Javascript
You might like
PHP开发入门教程之面向对象
2006/12/05 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
jQuery plugin animsition使用小结
2017/09/14 jQuery
three.js中文文档学习之创建场景
2017/11/20 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python全局变量操作详解
2015/04/14 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
行政助理求职自荐信
2013/10/26 职场文书
教师求职推荐信范文
2013/11/20 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
学雷锋月活动总结
2014/04/25 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Java界面编程实现界面跳转
2022/06/16 Java/Android
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle