<div id="app">
<div @click="dodo">
<button @: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 @click="dodo">
<button @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阻止点击事件继续传播的更多相关文章

  1. js阻止点击事件的冒泡的实现

    <html> <head> <script type="text/javascript"> function fnclick1(){ alert ...

  2. jquery click()方法模拟点击事件对a标签不生效

    if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...

  3. vue 遮罩层阻止默认滚动事件

    vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...

  4. jquery click()方法模拟点击事件对a标签不生效的解决办法

    阅读数:8971 <a href="www.baidu.com"></a> 1 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都 ...

  5. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  6. embed标签 阻止点击事件 让父元素处理点击事件

    由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

  7. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  8. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  9. Android学习-----Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

随机推荐

  1. SpringBoot 源码解析 (七)----- Spring Boot的核心能力 - 自定义Servlet、Filter、Listener是如何注册到Tomcat容器中的?(SpringBoot实现SpringMvc的原理)

    上一篇我们讲了SpringBoot中Tomcat的启动过程,本篇我们接着讲在SpringBoot中如何向Tomcat中添加Servlet.Filter.Listener 自定义Servlet.Filt ...

  2. Linux进程管理(ps、pstree、top、pidof、kill、nice、free)

    进程号(Process ID,PID) 1.ps命令(process status) 无选项时只显示从当前终端当前用户的进程 ps aux 是用BSD的格式来显示 java这个进程显示的项目有:USE ...

  3. SpringBoot 配置文件与依赖库分离打包配置

    一.应用场景 一般情况下我们对springboot应用打包时使用springboot的maven插件spring-boot-maven-plugin的maven进行打包,打包完成得到一个fatjar, ...

  4. Flex修改皮肤样式

    Flex修改皮肤大致有三种方式: (以button为例) 第一种:修改外观 1.flex项目中新建mxml外观.

  5. pdf 在线预览之 vue-pdf插件

    vue-pdf   支持到ie11npm安装:npm install --save vue-pdf 组件template: <div class="show-pdf"> ...

  6. 新闻实时分析系统-Hadoop2.X分布式集群部署

    (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 1.基于Apache厂商的最原始的hadoop版本, 所有发行版均基于这个版本进行改进. 2.基于 ...

  7. 02-tornado学习笔记-环境配置

    Ubuntu16.04开发环境 1.ubuntu默认root用户没有激活,激活root用户,就要为root用户创建密码   $sudo passwd root   2.修改主机名   $vi /etc ...

  8. Gzip,BZip2,Lzo,Snappy总结

    gzip,bzip2,lzo,snappy是hadoop中比较常见的文件压缩格式,可以节省很多硬盘存储,以下是Gzip , BZip2 , Lzo Snappy 四种方式的优缺点 和使用场景 Gzip ...

  9. CCNA 之 六 路由协议 二 EIGRP

    EIGRP(Enhanced IGRP) 增强型内部网关路由协议 注意:这是cisco私有协议:也就是说,该协议只能运行在思科的设备上,如果有其他的厂家的设备,则不能保证能运行此协议: EIGRP的特 ...

  10. SDWebImage学习之 NSCache

    1.使用SDWebImage的好处 1.异步下载(避免主线程卡死) 2.做好图片缓存(这样就不需要每次都加载网络图片) 3.解决了循环利用的问题 很容易造成内存警告