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> < ...
随机推荐
- goods商品类
- 洛谷 - P3469 - BLO-Blockade - 割点
https://www.luogu.org/problem/P3469 翻译:一个原本连通的无向图,可以删除图中的一个点,求因为删除这个点所导致的不连通的有序点对的数量.或者说,删去这个点之后,各个连 ...
- js实现简繁转换
document.write(" <a name=\"StranLink\" id=\"StranLink\" style=\"col ...
- 11.jQuery之淡入淡出效果
知识点:fadeIn fadeOut fadeToggle fadeTo <style> div { width: 150px; height: 300px; background ...
- 【测试环境】TCPCopy 使用方法
https://blog.csdn.net/ronmy/article/details/65657691 TCPCopy是一种请求复制(所有基于tcp的packets)工具,可以把在线请求导入到测试系 ...
- 096、运行第一个Service （Swarm03）
参考https://www.cnblogs.com/CloudMan6/p/7874609.html 上一节我们部署好了 Swarm 集群,下面部署一个运行httpd镜像的service进行演示 ...
- js的小练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Linux安装FastDFS~Nginx~
确保Linux联网,我这里使用的是CentOS7操作,联网教程 https://www.cnblogs.com/taopanfeng/p/10978752.html 先把指定的四个文件放入指定目录 安 ...
- java 求数组最大子序列之和
经典问题: 给定一个int[]数组,求其最大子序列之和(条件:数组中不全部都是负数). 最优算法,线性时间复杂度: public static int maxSubSum(int[] a){ int ...
- Ubuntu换阿里云源
sudo -s cd /etc/apt gedit source.list deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted u ...