JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中，有时我们需要阻止冒泡和阻止默认事件的发生。
一、event.stopPropagation()
阻止事件的冒泡，不让事件向documen上蔓延，但是默认事件任然会执行，当调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
二、event.preventDefault()
阻止默认事件的方法，调用此方法时，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
三、return false；
这个方法比较暴力，会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return
false就等于同时调用了event.stopPropagation()和event.preventDefault()。
JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别的更多相关文章
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- 原生js中stopPropagation,preventDefault,return false的区别
1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div' onclick='alert("div") ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
随机推荐
- Java中byte、short、char、int、long运算时自动类型转化问题
-------------------------------------------------------------------------------------------------- ★ ...
- 解析eBay BASE模式、去哪儿及蘑菇街分布式架构
目录:问题分析概念解读Most Simple原理解读eBey.去哪儿.蘑菇街分布式事务案例分析 参考资料 1.问题解析 要想做架构,必须识别出问题,即是谁的问题,什么问题.明显的,分布式架构解决 ...
- Python 爬虫利器 Selenium 介绍
Python 爬虫利器 Selenium 介绍 转 https://mp.weixin.qq.com/s/YJGjZkUejEos_yJ1ukp5kw 前面几节,我们学习了用 requests 构造页 ...
- 016.OpenStack及云计算（面试）常见问题
什么是云计算? 云计算是一种采用按量付费的模式,基于虚拟化技术,将相应计算资源(如网络.存储等)池化后,提供便捷的.高可用的.高扩展性的.按需的服务(如计算.存储.应用程序和其他 IT 资源). ...
- string method and regular expresions
<!doctype html> <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- curl get请求添加header头信息
function get($url) { $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPGET, true); curl_setopt($ch, CU ...
- 潭州课堂25班：Ph201805201 django框架 第五课 自定义简单标签，包含标签，模型类创建，梳理类创建 (课堂笔记)
自定义标签同自定义过渡器一样,要创建文件,在配置文件中以APP方法注册,对方法进注册,在 html 文件中引入,.. 由模板传参 在 在配置文件中改时区: 由视图函数传参 包含标签: 当有这种重复的代 ...
- maven命令注册jar包到maven仓库
首先需要具备maven环境 在cmd命令行执行以下命令注册jar包 mvn install:install-file -Dfile=E:\aliyun-java-sdk-dysmsapi-1.0.0. ...
- [APIO2012]派遣
[APIO2012]派遣 题目大意: 给定一棵\(n(n\le10^5)\)个结点的有根树,每个点有代价\(c_i\)和权值\(l_i\),要求你选定一个结点\(k\),并在对应的子树中选取一个点集\ ...
- CSS-三角形及其原理
CSS中三角形在网页中比较常见,以前是图片,不过现在基本上都是通过CSS可以完成,实现比较简单,我们可以看一组简单的三角形效果: 其实实现起来比较简单,通过空div然后设置宽高为0,之后可以四周bor ...