27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<!--默认是从里向外冒泡响应事件,从子级->父级元素响应事件,-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">从里向外冒泡响应事件</a>
</div>
<br>
<!--capture捕获事件,从父级->子级元素响应事件,-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
<a href="https://www.cnblogs.com/haima" @click.stop.prevent="links">阻止从里向外冒泡响应事件,阻止点击a连接跳转</a>
</div>
<br>
<!--self点到自己才触发事件,点谁谁响应事件-->
<div @click.self="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,由于父级加了self,所以就不会向上冒泡响应事件,效果同上面的stop-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">父级加self,阻止a标签冒泡响应事件,点谁谁响应事件</a>
</div>
<br>
<!--capture捕获事件,从父级->子级元素响应事件,-->
<div @click.capture="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">从父级->子级元素响应事件</a>
</div>
<br>
<!--once是只绑定一次跳转-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转-->
<a href="https://www.cnblogs.com/haima" @click.once.stop.prevent="links">从父级->子级元素响应事件</a>
</div>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {},
methods: {
box(){
alert('div');
},
links(){
alert('www.cnblogs.com/haima');
}
}
});
</script>
</body>
</html>
效果:
27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解的更多相关文章
- vue学习(六) 事件修饰符 stop prevent capture self once
//html <div id="app"> <div @click="divHandler" style="height:150px ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- （二）咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...
随机推荐
- IIS错误HTTP 错误 500.21 - Internal Server Error
原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:以管理员身份运行cmd->输入“%windir%\Microsoft.NET\Framewo ...
- 导入maven多模块项目 出现的问题
近日导入maven多模块项目 出现的问题以及解决过程2017年12月04日 20:43:04 守望dfdfdf 阅读数:815 标签: jdkmavenmaven pom.xml 更多个人分类: 工作 ...
- 锁丶threading.local丶线程池丶生产者消费者模型
一丶锁 线程安全: 线程安全能够保证多个线程同时执行时程序依旧运行正确, 而且要保证对于共享的数据,可以由多个线程存取,但是同一时刻只能有一个线程进行存取. import threading v = ...
- <Android 应用 之路> 天气预报（五）
前言 写了上一篇文章,讲了下这个实现天气预报的使用内容,现在又到了看代码的时候,主要还是贴代码,然后添加足够的注释. 聚合数据SDK配置 将juhe_sdk_v_X_X.jar以及armeabi文件夹 ...
- @Valid的坑
@Valid 只能用来验证 @RequestBody 标注的参数,并且要写在 @RequestBody 之前
- org.hibernate.HibernateException: Unable to get the defa
今天整合SSH框架时出现了这个问题,以前一直没注意,在网上找了一下解决方案,找到了问题的解决方法,特记录如下: 1.原因:在中,javax.persistence.validation.mode默认情 ...
- 在MVC中使用NHibernate学习记录
NHibernate简介: NHibernate是一个面向.net环境的对象/关系数据库映射工具,对象/关系数据库映射(object/relational mapping,ORM)是一种技术,可以将对 ...
- C语言的一小步—————— 一些小项目及解析
——-------- 仅以此献给东半球第二优秀的C语言老师,黑锤李某鸽,希望总有那么一天我们的知识可以像他的丰臀一样渊博! bug跟蚊子的相似之处: 1.不知道藏在哪里. 2.不知道有多少. 3.总是 ...
- 一个普通 iOS 码农的几个小项目相关知识点总结
题记:在开发的路途上,有的人走的很深很远,而对于停留在初级阶段的我来说,还要学的.经历的还有很多... list sqlite 数据库中,当把表里的数据都清空时,下次插入的数据的 id 主键不会从 0 ...
- Q9400为何难以100%全速运行
采用基于正域的约简. 数据:Ticdata2000 记录数:5822 条件属性:85 结果: 1. Core i7 3632QM 4四核八线程 2.2G 动态加速3.2G 0.516s 2. Core ...