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鼠标划过切换效果
Jun 30 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
设定php简写功能的方法
2019/11/28 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python实现股市信息下载的方法
2015/06/15 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python中反射和描述器总结
2018/09/23 Python
使用python去除图片白色像素的实例
2019/12/12 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
大学生职业生涯规划书参考模板
2014/03/05 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
学习作风建设心得体会
2014/10/22 职场文书
Django显示可视化图表的实践
2021/05/10 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL