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> < ...
随机推荐
- Python 入门之 内置模块 -- collections模块
Python 入门之 内置模块 -- collections模块 1.collections -- 基于Python自带的数据类型之上额外增加的几个数据类型 from collections 在内 ...
- 匿名函数lambda和map函数
一.map函数,实现迭代操作 map(f1,x) f1为函数的名称(不加括号),x为map的参数,示例如下: def add(a): return a+10 print map(add,[1,2,3] ...
- 使用Jenkins结合Gogs和SonarQube对项目代码进行测试、部署、回滚,以及使用keepalived+haproxy调度至后端tomcat
0 环境说明 主tomcat:192.168.0.112 备tomcat:192.168.0.183 haproxy+keepalived-1:192.168.0.156 haproxy+keepal ...
- 简单CSS实现闪烁动画(+1白话讲解)
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- IDEA配置远程git仓库
一,在项目创建本地仓储 2,选择当前文件夹为本地仓储 3, 将代码添加到本地仓库 4,提交到本地仓库 5,提交到本地仓库 配置远程账号和地址 输入你自己的远程仓库----码云或者github,创建的 ...
- 国际化:node导语言包
项目做国际化,是离不开语言包的en.json.zh-CN.json等等.难道要一个一个json文件的写吗???不!!!只要我们写在excel里,然后用nodejs导出我们需要的语言包就可以了!这样大大 ...
- 69. Sqrt(x) (JAVA)
Implement int sqrt(int x). Compute and return the square root of x, where x is guaranteed to be a no ...
- install - 复制文件并设置属性
SYNOPSIS[总览] install [options] [-s] [--strip] source dest install [options] [-s] [--strip] source... ...
- 关于 Google 公司的一些趣闻
简评: 很少有科技公司能像 Google 一样象征着这个数字时代,你知道 Google,但不一定知道以下这些有趣数据.这些来自 VizionOnline 的数据概述了不为人知的 Google 趣闻,分 ...
- putty ssh常用命令小结
打开putty 输入VPS的IP地址输入root回车输入密码回车 vps 更改文件夹所属组 cd /home/vpsuser/domains/afish.cnblogs.com/ chown -R v ...