vue click.stop阻止点击事件继续传播
<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阻止点击事件继续传播的更多相关文章
- js阻止点击事件的冒泡的实现
<html> <head> <script type="text/javascript"> function fnclick1(){ alert ...
- jquery click()方法模拟点击事件对a标签不生效
if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...
- vue 遮罩层阻止默认滚动事件
vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...
- jquery click()方法模拟点击事件对a标签不生效的解决办法
阅读数:8971 <a href="www.baidu.com"></a> 1 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都 ...
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- embed标签 阻止点击事件 让父元素处理点击事件
由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
- Android笔记——Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- Android学习-----Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
随机推荐
- nyoj 74-小学生算术(进位问题)
74-小学生算术 内存限制:64MB 时间限制:3000ms 特判: No 通过数:23 提交数:53 难度:1 题目描述: 很多小学生在学习加法时,发现“进位”特别容易出错.你的任务是计算两个三位数 ...
- nyoj 277-车牌号 (map, pair, iterator)
277-车牌号 内存限制:64MB 时间限制:3000ms 特判: No 通过数:9 提交数:13 难度:1 题目描述: 茵茵很喜欢研究车牌号码,从车牌号码上可以看出号码注册的早晚,据研究发现,车牌号 ...
- 详解在Linux系统中安装JDK
本文以在CentOS 7.6中安装JDK8为例进行安装,其他系统和版本都是大同小异的. 下载 进入Oracle官方网站的下载页面. 首先,接受许可协议,如下图: 然后,根据Linux系统的位数选择要下 ...
- 2019-11-27:kali 2019-4中文乱码解决方法
1.更换阿里源 vim /etc/apt/soul,编辑源之后,apt-get updata && apt-get upgrade && apt-get clean , ...
- 初探SpringMVC,走进SpringMVC的世界
1.Springmvc入门 1.1.Springmvc是什么 SpringMVC是Spring中的一个组件,目前(2019)在互联网公司用的很多,是必需学习的一门框架技术!SpringMVC用于web ...
- CSS中如何使用背景样式属性,看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
- day03_正则表达式
1.数据分类 数据的分类 定义:数据以行为单位,每一个数据表示一个实体的信息.每一行数据的属性都是一样的. 常见的结构化数据为关系型数据库存储数据. 半结构化数据 定义:结构化数据的另一种 ...
- Java8 Stream中间操作使用详解
前面两篇简单的介绍了Stream以及如何创建Stream,本篇就给大家说说stream有哪些用途,以及具体怎样使用. 再次介绍Stream Stream 使用一种类似用于SQL 语句从数据库查询数据的 ...
- https的安装(基于阿里云)
背景介绍:首先我的服务器在是阿里云的云服务器,web服务器使用的是nginx 进入到阿里云的ssl证书的管理界面,按需选择套餐后进行申请,申请完成后进行补全操作,最后是变成如下界面点击--下载进行证书 ...
- 微信小程序setData复杂数组的更新、删除、添加、拼接
众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ ...