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> < ...
随机推荐
- Linux目录机构及目录管理
Linux的目录结构与目录管理 Linux目录结构: 1 目录创建规则 FHS 文件系统层次化标准 指定Linux操作系统哪些目录必须具备 /boot /bin /sbin /etc /sys /pr ...
- Maven 相关功能介绍
一: Maven环境隔离
- Property 'showModal' does no t exist on type 'JQuery<HTMLElement>'
在 TS 代码中使用 jQuery 等库时配合插件使用,但是插件的开发人员并没有为其扩展 jQuery 的类型定义,这是使用插件的方法必然会报 TS 的类型错误,这时候要快速选择忽略该报错的最直接的方 ...
- yii报错yii\web\Request::cookieValidationKey must be configured with a secret key.
在config文件下main-local.php配置 'cookieValidationKey' => 'rabbit1234',
- Android 静态代码分析工具
简评: 作者在文中提到的三个静态代码分析工具不是互相替代的关系,各有各的侧重点,如果有需要完全可以同时使用. 静态代码分析是指无需运行被测代码,仅通过分析或检查源程序的语法.结构.过程.接口等来检查程 ...
- HTTP/1.1-HTTP/2.0-HTTP/3.0-HTTPS
HTTP/1.1 网上关于HTTP/1.1的讨论多是基于RFC2616文档,而IETF已更新了HTTP/1.1并将其分为六个部分,使协议变得更简单易懂,对老版本RFC2616中模糊不清的部分做了解释 ...
- 浅谈java虚拟机|系列2|JVM运行时
今天我们继续谈谈JVM架构. 今天主要讲讲JVM运行时, 先来一个图: 上篇文章,我们知道,JVM运行时,简单来说就是把class文件翻译成操作系统相关的机器码(或汇编语言),然后通过调用操作系统函数 ...
- java高并发核心要点|系列3|锁的底层实现原理|ABA问题
继续讲CAS算法,上篇文章我们知道,CAS算法底层实现,是通过CPU的原子指令来实现. 那么这里又有一个情景: 话说,有一个线程one从内存位置V中取出A,这时候另一个线程two也从内存中取出A,并且 ...
- aes前台加密后台解密
aes加密npm地址:https://www.npmjs.com/package/crypto-js aes加密git地址/下载: https://github.com/brix/crypto-js ...
- IDEA部署Spring-boot到Docker容器
一.准备工作 idea安装Docker插件 centos7系统安装docker 二.打开docker远程端口 1. 编辑docker.service文件 vim /usr/lib/systemd/sy ...