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后面添 ...
随机推荐
- .Net core使用XRPC创建远程接口的Actor对象
Actor是一种高并发处理模型,每个Actor都有着自己的状态有序消息处理机制,所以在业务处理的情况并不需要制定锁的机制,从而达到更高效的处理能性.XRPC是一个基于远程接口调用的RPC组件,它可以简 ...
- com.google.gson.stream.MalformedJsonException的解决办法
关于Gson解析的异常,如果你程序出现以下的异常,有两种可能性:‘ 1. 找到一个JSON格式的验证工具,这个网上很多大家可以百度下: 2.你的JSON格式验证没有问题,却一直报这个解析错误,请确定你 ...
- JAVA基础系列（一） 概述与相关概念
万事开头难,来这个平台上已经有一段时间了,看到了很多高质量的文章,也很喜欢这种简约的风格.一直也想把自己的零散的知识体系组织起来,但苦于自己拙劣的文笔和不成流派的风格让大家笑话,直到现在才开始.可是从 ...
- Java语言程序设计（第三版）第二章课后习题答案（仅供参考）
2.1 注意不同类型转换 import java.util.Scanner; public class Ch02 { public static void main(String[] args) ...
- Magento 中一个订单的“生命历程”
当我们在网上愉快的买买买的时候, 你知道在这些屏幕“背后”正在进行着什么吗? 1. 当一个产品被加入到购物车后, 实际上发生了什么? 当第一个产品被加入到购物车, 系统首先会生成一个 quote (q ...
- laydate 显示结束时间不小于开始时间
jsp: <div class="form-group"> <label >交易时间:</label> <input ...
- javaweb 工程 tomcat启动报错的问你
2015-03-03 14:39:32,657 INFO (org.springframework.web.context.ContextLoader:296) - Root WebApplicati ...
- Spring IoC和AOP的介绍
基于Spring Framework 版本:5.0.2.RELEASE IoC 概念:传统Java开发中,程序通过new主动创建对象实例,而Spring有专门的IoC容器来创建对象,具体来说就是在Sp ...
- php编译安装过程中遇到问题
编译安装PHP时遇到的问题 问题1: configure: error: xml2-config not found. Please check your libxml2 installation. ...
- 【Python音乐生成】这是一个超棒的dataset
http://colinraffel.com/projects/lmd/