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

1、stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为。

最好莫过于用例子说明:

<div id=‘div‘  onclick=‘alert("div");‘>
    <ul  onclick=‘alert("ul");‘>
        <li id=‘ul-a‘ onclick=‘alert("li");‘><a href="http://www.baidu.com" id="link">baidu.com</a></li>
    </ul>
</div>

var a = document.getElementById("link");
    a.addEventListener("click",function(event){
        event.stopPropagation();
    },false);

在FF上执行,不会弹出li,ul,div的弹出框,而是直接跳转。在上面定义的事件中,侦听的是事件冒泡阶段(第三个参数为false,若为true则是捕获阶段)。IE不支持事件流,在IE中定义事件处理程序需要使用attachEvent:

a.attachEvent("onclick",function(event){event.cancelBubble = true;});

2、preventDefault:阻止事件的默认行为,但不阻止冒泡。

在FF,chrome,Safari,opera有效:

a.addEventListener("click",function(event){
        event.preventDefault();
    },false);

在IE有效:

a.attachEvent("onclick",function(event){event.returnValue = false;});

浏览器执行,会弹出li,ul,div的弹出框,但不会跳转。

3、return false:看到网上说return false会阻止事件的冒泡,但是应该要看定义事件使用的是什么方式

若使用a.onclick或a.attachEvent,则 return false会阻止默认行为;

若使用a.addEventListener,则return false 不会阻止默认行为;

因此,使用原生js时,若要阻止默认行为,最好还是用event.preventDefault(针对非IE)或event.returnValue=false(针对IE)来设定。

若使用的是jquery,return false 即会阻止默认行为,也会阻止事件的冒泡。在jquery中,一般使用return false.

时间: 2024-10-05 03:57:34

原生js中stopPropagation,preventDefault,return false的区别的相关文章

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

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

js中的preventDefault与stopPropagation详解

本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.co

原生js使用forEach()与jquery使用each遍历数组,return false 的区别

原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

How to correctly use preventDefault(), stopPropagation(), or return false; on events

How to correctly use preventDefault(), stopPropagation(), or return false; on events I’m sure this has been written about many times before and probably has hundreds of answers on StackOverflow. Despite this we still find ourselves going through code

原生 JS 中对象相关 API 合集

https://juejin.im/entry/58f8a705a0bb9f0065a4cb20 原文链接:https://microzz.com/2017/04/20/jsobject/ 原生 JavaScript 中对象相关 API 合集 - 对象篇.现在 jQuery 已经没有那么有优势了,原生 JS 赶紧学起来... -- 由microzz分享 Microzz [email protected] 主页 文章 标签 GitHub 关于我 掘金专栏 SegmentFault Vue音乐播放器

ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一个判断是 ajax 请求的常量 IS_AJAX: Ajax 请求常用的有两种情况:一种是原生 js 的 ajax 请求.一种是 jQuery 的 ajax 请求. 分析: 先看看使用 jQuery 中使用 ajax 发送请求的时候的头信息: Accept: application/json, tex

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

js中的==运算: [&#39;&#39;] == false —&gt;true

图1 计算下面表达式的值: [''] == false 首先,两个操作数分别是对象类型.布尔类型.根据图1,需要将布尔类型转为数字类型,而false转为数字的结果是0,所以表达式变为: [''] == 0 两个操作数变成了对象类型.数字类型.根据图1,需要将对象类型转为原始类型: 首先调用[].valueOf(),由于数组的valueOf()方法返回自身,所以结果不是原始类型,继续调用[].toString(). 对于数组来说,toString()方法的算法,是将每个元素都转为字符串类型,然后用

JS中NaN、null、Undefined区别

1.NaN(not a number)非数字.不和任何数字相等,包括自己本身,可以用isNaN()判断,当praseInt()和praseFloat()不能解析时返回NaN.NaN为number对象下的一个属性,number.NaN typeof(NaN)   //return number NaN == NaN   //return FALSE 2.null 表示尚未存在的对象, 3.undefined表示尚未初始化   var a:alert(a)  //return undefined 在