在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生。
  一、event.stopPropagation()
  阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。
  二、event.preventDefault()
  阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
  三、return false;
  这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return
 false就等于同时调用了event.stopPropagation()和event.preventDefault()。

JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别的更多相关文章

  1. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  4. 原生js中stopPropagation,preventDefault,return false的区别

    1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div") ...

  5. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  6. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  7. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  8. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. BZOJ1975 [Sdoi2010]魔法猪学院 k短路

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1975 题意概括 给出一个无向图,让你走不同的路径,从1到n,路径长度之和不超过E,求最大路径条数. ...

  2. Python交互图表可视化Bokeh:5 柱状图| 堆叠图| 直方图

    柱状图/堆叠图/直方图 ① 单系列柱状图② 多系列柱状图③ 堆叠图④ 直方图 1.单系列柱状图 import numpy as np import pandas as pd import matplo ...

  3. POJ 2418 Hardwood Species 【Trie树】

    <题目链接> 题目大意: 给你一堆字符串,让你按字典序输出他们出现的频率. 解题分析: 首先,这是Trie数词频统计的题目,以Trie树的边储存字母,节点存储以该节点结尾的链所代表的字符串 ...

  4. HDU1232——畅通工程【并查集】

    <题目链接> 题目大意: 利用并查集找出图中有几个不连通的城镇集合,所需修的道路数即为城镇集合-1. #include <stdio.h> ]; int find(int x) ...

  5. Django之视图函数总结

    Django之视图函数总结 HttpRequest与HttpResponse http请求中产生两个核心对象: HttpRequest对象:用户请求相关的所有信息(对象) HttpResponse对象 ...

  6. Java中对数组的操作

    数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对于数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素.如:声明一个数组变量,numbers[100]来 ...

  7. Misunderstood-Missing-逆向DP

    Misunderstood … Missing 记忆深刻......打铁没做出来的题 题意 : 打怪,有 A 的攻击力,有 D 的成长,初始均为 0,有 n 轮. 同时有三个数组 a[1:n],b[1 ...

  8. linux学习笔记 less命令

    空格 或者 ctrl+f  前进一屏     ctrl+b  后退一屏幕 回车 前进一行 /string                  查找含有string字符串的页 ?string        ...

  9. Django之ORM字段和字段参数

    ORM介绍 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 Django中的ORM Django项目使用MySQL数据库 Model 快速入门 字段 自定义字段 字段参数 Model ...

  10. BUG——Celery ValueError: not enough values to unpack

    背景 最近因项目需要,学习任务队列Celery的用法,跟着官网写Demo,出现如题错误,最终在github的Issues里找到解决办法,记录如下. 场景还原 本地环境如下: Windows 7 Pyt ...