Vue event.stopPropagation()和event.preventDefault()的使用
定义和用法
1. event.stopPropagation()方法
阻止事件冒泡到父元素,阻止任何父事件处理程序被执行,但是它的默认事件仍然会执行。当调用这个方法的时候,如果点击了一个链接(a标签),这个链接仍然会打开。
2. event.preventDefault()方法
阻止元素发生默认的行为。调用此方法链接(a标签)不会被打开,但是会冒泡到父元素上。
例如:
(1). 当点击提交按钮时阻止对表单的提交
(2). 阻止 URL 的链接(意思是如果点击一个a标签,浏览器不会跳到新的 URL 里面去)
Vue event.stopPropagation()和event.preventDefault()的使用的更多相关文章
- vue 中 event.stopPropagation() 和event.preventDefault() 使用
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.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()
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault(),return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- event.stopPropagation()与event.preventDefault()
<div id='div0'> <div id='div1'> <a href="#" id='div2'>2222</a> < ...
- event.stopPropagation与event.preventDefault的区别
1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...
随机推荐
- CREATE TABLE——数据定义语言 (Data Definition Language, DDL)
Sql语句分为三大类: 数据定义语言,负责创建,修改,删除表,索引和视图等对象: 数据操作语言,负责数据库中数据的插入,查询,删除等操作: 数据控制语言,用来授予和撤销用户权限. 数据定义语言 (Da ...
- HDU 3333-Turing Tree-线段树+离散+离线
Description After inventing Turing Tree, 3xian always felt boring when solving problems about interv ...
- Java并发(思维导图)【待评估、删除】
1, 2, 3,常用函数 Semaphore import java.util.concurrent.Semaphore;Semaphore name=new Semaphore(n); name.a ...
- .Net下二进制形式的文件存储与读取
.Net下图片的常见存储与读取凡是有以下几种:存储图片:以二进制的形式存储图片时,要把数据库中的字段设置为Image数据类型(SQL Server),存储的数据是Byte[].1.参数是图片路径:返回 ...
- Springboot 使用pageHelper实现分页查询
本文链接:https://blog.csdn.net/qq_35387940/article/details/91530234
- winForm入门学习
Windows窗体 属性: name:对象的名称 windowsState:初始化窗体的大小,Normal,Minimized,Maximized StartPosition:窗体起始位置,Manua ...
- c#OpenCVSharp+Zxing识别条形码
参考博客:https://www.cnblogs.com/dengxiaojun/p/5278679.html,但是他的demo下载太贵了 可以下载这个https://download.csdn.ne ...
- Vue中断axios请求-切换页面+重复请求
切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...
- ES6入门十:iterator迭代器
迭代模式 ES6迭代器标准化接口 迭代循环 自定义迭代器 迭代器消耗 一.迭代模式 迭代模式中,通常有一个包含某种数据集合的对象.该数据可能存在一个复杂数据结构内部,而要提供一种简单的方法能够访问数据 ...
- .NET webapi 的单元测试
public abstract class MirAPIUnitTestCommon { public abstract string GetBaseAddress(); /// <summar ...