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后面添 ...
随机推荐
- python学习二(文件与异常)
Python中使用open BIF与文件交互,与for语句结合使用,一次读取一行 读取文件sketch.txt,文件内容如下: Man: Ah! (taking out his wallet and ...
- Dede友情链接和分页列表和内容分页去掉小圆点LI标签
我用了一个比较老式的模板,友情链接和列表页底下的一段分页导航会自动获取LI标签,导致错位.每段文字前还多出一个可恶的黑色实心小圆点,心想肯定是LI标签在搞怪,于是把模板文件和样式文件都翻看了一个底朝天 ...
- properties文件 , properties类, 的作用
"properties文件",是java所支持的配置文件类型.java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文 ...
- <Win7硬件故障分析>
查看当前系统正在运行的硬件信息. 右击计算机——属性——设备管理器看到下面: 一些常见的硬件故障: 主板故障 >开机不正常,偶尔出现突然的断电现象 >明明自己选择了关机,但是还是无法关机或 ...
- Ini文件格式说明
http://www.cnblogs.com/CUIT-DX037/ 百度百科介绍:ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储 ...
- FMCW 雷达原理(转)
FMCW(Frequency Modulated Continuous Wave),即调频连续波.FMCW技术和脉冲雷达技术是两种在高精度雷达测距中使用的技术.其基本原理为,发射波为高频连续波,其频率 ...
- 使用Window Media Player网页播放器
近段时间在做一个IETM的项目,项目需要使用WebBrower对包含avi的xml进行显示,可avi的显示总是有问题,网上找到这段在html中播放avi的代码,在Win10上表现不错,明天上班用Win ...
- <已解决> Eclipse启动失败
参考:http://stackoverflow.com/questions/15404964/starting-eclipse-results-in-failed-to-create-java-vir ...
- 解决spring配置文件没有提示的问题
我们使用eclipse编辑spring配置文件时,经常没有提示,而无从下手时. 现在我们就来解决没有提示的问题. 原因是因为eclipse中没有配置xsd文件.. 步骤一:把如下头文件拷贝到你的spr ...
- 【转】Web实时通信之Socket.IO ,真正的兼容ie
前面两篇文章使用了Ajax long polling和WebSocket两种常用的Web实时通信方式构建了简单的聊天程序. 但是,由于浏览器的兼容问题,不是所有的环境都可以使用WebSocket这种比 ...