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后面添 ...
随机推荐
- Oracle之rman数据库在非归档模式下的备份和恢复
1.数据库在非归档模式下的备份 SQL> archive log list;数据库日志模式 非存档模式自动存档 禁用存档终点 USE_DB_RECOVERY_FILE_DEST最早的联机日志序列 ...
- Struts2 源码分析-----Hello world
今天第一天学习struts2,没学过怎么办,那当然是helloworld.感觉嘛,学习的基本流程都差不多,就是helloworld,开发环境,然后就是逐个按照知识点打demo,打着打着你就会发现str ...
- 018.Java类加载器
https://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 类加载器(class loader) 用来加载 Java 类到 Java 虚拟 ...
- 对CSRF的理解及防范
对CSRF的理解: 假定a是一个银行网站, b是一个危险网站. 当用户在访问a, 并且session并未结束的情况下, 去访问b网站, b网站就可以通过隐藏的url或者是表单来伪造用户对a的get或者 ...
- jQuery的parent和parents和closest区别
1.parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.2.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选.3.clo ...
- jeesit 部署404
1.刷新项目 2.clean 项目 3.重新部署项目 4.Ran as maven build 后在重新部署 5.重新导入maven项目
- 博客系统-后台页面搭建：eazy
业务分析:布局为四个模块上边是系统描述,左边是导航菜单,中间是每个窗口的内容,下边是版权信息 点击左边的导航按钮,在右边窗口显示 代码: <%@ page language="java ...
- 使用Java+SAP云平台+SAP Cloud Connector调用ABAP On-Premise系统里的函数
最近Jerry接到一个原型开发的任务,需要在微信里调用ABAP On Premise系统(SAP CRM On-Premise)里的某些函数.具体场景和我之前的公众号文章 Cloud for Cust ...
- 【BZOJ1045】糖果传递（基于贪心的数学题）
点此看题面 大致题意: 有\(n\)个小朋友坐成一圈,每人有\(a[i]\)个糖果.每人只能给左右两人传递糖果,传递一个糖果代价为1,求使所有人获得均等糖果的最小代价. 数学转换 这题其实是一道带有浓 ...
- 2018.6.19 Java核心API与高级编程实践复习总结
Java 核心编程API与高级编程实践 第一章 异常 1.1 异常概述 在程序运行中,经常会出现一些意外情况,这些意外会导致程序出错或者崩溃而影响程序的正常执行,在java语言中,将这些程序意外称为异 ...