vue 中 event.stopPropagation() 和event.preventDefault() 使用
1.event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
3.return false ；
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
btn(event) {
//event.preventDefault()
event.stopPropagation(); //如果是连接还是会打开
console.log(event.type);
}
}
})
</script>
</html>
vue 中 event.stopPropagation() 和event.preventDefault() 使用的更多相关文章
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- event.stopPropagation()和event.preventDefault()
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- event.stopPropagation()，event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault()，return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- Vue event.stopPropagation()和event.preventDefault()的使用
定义和用法 1. event.stopPropagation()方法 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行,但是它的默认事件仍然会执行.当调用这个方法的时候,如果点击了一个链接(a标签) ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
- event.stopPropagation()与event.preventDefault()
<div id='div0'> <div id='div1'> <a href="#" id='div2'>2222</a> < ...
随机推荐
- [BZOJ1009] [HNOI2008] GT考试(KMP+dp+矩阵快速幂)
[BZOJ1009] [HNOI2008] GT考试(KMP+dp+矩阵快速幂) 题面 阿申准备报名参加GT考试,准考证号为N位数X1X2-.Xn,他不希望准考证号上出现不吉利的数字.他的不吉利数学A ...
- 从入门到自闭之Python三大器--迭代器
函数名的第一类对象(概述): 使用方式: 函数名可以当做值赋值给变量 def func(): print(1) print (func) #查看函数的内存地址 a = func print (a) # ...
- redis windows 安装 下载 常用参数
下载地址 https://github.com/ServiceStack/redis-windows/tree/master/downloads 安装可视化工具 RedisDesktopManager ...
- GitHub 上有哪些优秀的 Python 爬虫项目？
目录 GitHub 上有哪些优秀的 Python 爬虫项目? 大型爬虫项目: 实用型爬虫项目: 其它有趣的Python爬虫小项目: GitHub 上有哪些优秀的 Python 爬虫项目? 大型爬虫项目 ...
- PostgreSQL-事务与commit优化
基本概念 事务 Transaction 是 数据库管理系统DBMS 执行过程中的一个逻辑单元,是一个 sql命令组成的序列. 其特点在于,当事务被提交DBMS后,DBMS需要确保所有的操作被完成:如果 ...
- numpy-查找操作大全
本文记录日常工作中遇到的查找操作,持续更新. 注意:输入必须是 数组,不能是 list 极值 min,max 返回极值 argmin(a, axis=None, out=None), 返回极值所在的位 ...
- Java Web开发技术教程入门-初识动态网页
这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...
- python接口、抽象类与抽象方法
接口: -url -数据类型,python不存在 class 类名 1.类中的方法可以写任意多个 2.如果想要对类中的方法做约束,就需要写接口 接口中定义一个方法f1,可以约束继承他的子类 class ...
- wex5 如何使用蓝牙 ble
使用蓝牙插件 需要在js中添加 require("cordova!cordova-plugin-ble-central"); ble插件具体文档: http://docs.we ...
- Java的GUI框架如何选择? Swing、SWT、AWT、SwingX、JGoodies、JavaFX、Apache Pivot、BeautyEye框架（美观）?
AWT 是swing的基础,运行良好,但缺少高级组件.如果您打算创建丰富的应用程序,那么AWT可能不是最好的方法.但是对于不需要丰富用户界面的较小gui应用程序来说.这可能非常适合,因为它是一个久经考 ...