Vue阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="main" @click="a">
<span @click.stop="b">我是Span <i @click.stop="c">我是i</i></span>
</div>
<script>
var example1 = new Vue({
el:".main",
data: {
counter: 0
},
methods:{
a(){
alert('我是div');
},
b(){
alert('我是span');
},
c(){
alert('我是i');
}
}
})
</script>
</body>
</html>
Vue阻止冒泡的更多相关文章
- vue 阻止冒泡 @click.stop=
vue 阻止冒泡 @click.stop= vue中处理冒泡标准姿势 事件修饰符 Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的.这些事件修饰符主要有以下几个: st ...
- vue 阻止冒泡弹窗小案例( 知识点：@click.stop=''")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 重新认识vue之事件阻止冒泡
冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
- vue 点击事件阻止冒泡 用stop
1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- vue之冒泡阻止
用了Element ui写页面 <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <el-s ...
- Js阻止冒泡，Vue中如何阻止冒泡事件
js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...
- 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透
可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
随机推荐
- 【Socket编程】通过Socket实现TCP编程
通过Socket实现TCP编程 Socket通信 : 1.TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 2.基于TCP协议实现网络通信的类: 客户端----Socket类 服务器 ...
- Swing-BoxLayout用法-入门
注:本文内容源于http://www.java3z.com/cwbwebhome/article/article20/200016.html?id=4797:细节内容根据笔者理解有修改. BoxLay ...
- 201521123027 《JAVA程序设计》第五周学习总结
1.本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容 Comparable接口与Comparator接口的区别: Markdown的其他用 ...
- 201521123048 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- Java程序设计——学生基本信息管理系统
1.团队课程设计博客链接 http://www.cnblogs.com/handsome321/p/7067121.html 2.个人负责模块说明 本组课题:学生信息管理系统 本人任务:插入.删除学生 ...
- **********MySql查询方法重要**********
分析问题要分步,查询每一步的结果,最后连起来 例如下面有四张表让你查询 查询选修“3-105”课程的成绩高于“109”号同学成绩的所有同学的记录. 第一部,找到课程编号为3-105的记录中学号为109 ...
- Oracle-一个中文汉字占几个字节?
Oracle 一个中文汉字占用几个字节 Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定!!! 1. 如果定义为VARCHAR2(32 CHAR),那么该列最多就可以存储3 ...
- 0 can't find referenced pointcut declarePointExpress
今天在用SpringAOP 的 @pointCut 的时候报错 Exception in thread "main" org.springframework.beans.facto ...
- centOS7服务管理与启动流程
centOS7服务管理与启动流程 centOS7启动流程 systemd简介 unit对象 unit类型 特性 service unit文件格式 service unit file文件通常由三部分组成 ...
- 这是一名Java学者关于学习方向的建议
无可厚非,编程是一门艺术.但是辉煌的背后必须是一段辛苦的奋斗过程,而过程的引导方向就是最重要的一环.Java语言可谓是引领了编程的潮流,你会是怎样去学的呢? 这是一名Java学者的学习方向的建议 注: ...