所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件。
监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件。
浏览器的默认事件:特定页面元素上带的功能,如a标签的href跳转,表单的提交事件。
执行监听事件在先,浏览器默认事件在后,所以可以在监听事件函数中,阻止浏览器的默认行为。
区别:preventDefault() 阻止浏览器默认事件 stopPropagation() 阻止事件的冒泡 return false; 阻止后续的所有行为
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//preventDefault,比如<a href='http://www.baidu.com'>百度</a>,preventDefault的作用就是阻止它的默认行为
function stoptDefault (e) {
if(e&&e.preventDefault){
e.preventDefault();
}
else{
window.event.returnValue=false;
}
return false;
}
window.onload=function(){
var test=document.getElementById("testLink");
test.onclick=function(e){
alert("我的连接地址是:"+this.href+',但是我不跳转');
stoptDefault(e);
}
}
//stopPropagation 阻止js事件冒泡 window.onload=function(){
var parent1=document.getElementById("parent1");
var childrent1=document.getElementById("childrent1");
parent1.onclick=function(){
alert(parent1.id)
};
childrent1.onclick=function(){
alert(childrent1.id)
};
}
function stopPro(obj,evt){
var e=(evt)?evt:window.event;
if(window.event){
e.cancelBubble=true;//ie下的阻止冒泡
}
else{
e.stopPropagation();//其他浏览器下的阻止冒泡
}
}
window.onload=function(){
var parent2=document.getElementById("parent2");
var childrent2=document.getElementById("childrent2");
parent2.onclick=function(){
alert(parent2.id)
};
childrent2.onclick=function(e){
stopPro(this,e);
alert(childrent2.id)
};
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<br/>
<div id="parent1" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="childrent1" style="width:200px;background-color:orange">
<p>This is Chilren1.</p>
</div>
</div>
<br/>
<div id="parent2" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="childrent2" style="width:200px;background-color:lightblue;">
<p>This is childrent2. Will bubble.</p>
</div>
</div>
</body>
</html>

JS preventDefault ,stopPropagation ,return false的更多相关文章

  1. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

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

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

  3. preventDefault()、stopPropagation()、return false 的区别

    preventDefault() e.preventDefault()阻止浏览器默认事件 stopPropagation() e.stopPropagation()阻止冒泡 return false ...

  4. e.preventDefault() e.stopPropagation()和return false的区别

    e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...

  5. 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 h ...

  6. e.preventDefault()和e.stopPropagation()以及return false的作用和区别

    前段时间开发中,遇到一个父元素和子元素都有事件时,发现会出现事件冒泡现象,虽然知道ev.stopPropagation()和ev.preventDefault()其中一个是阻止事件冒泡和阻止默认行为, ...

  7. 在jquery中each循环中,要用return false代替break,return true代替continue。

    在jquery中each循环中,要用return false代替break,return true代替continue. $.each(data, function (n, value) { if(v ...

  8. 阻止事件冒泡两种方式:event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  9. preventDefault, stopPropagation, return false -JS事件处理中的坑

    我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...

随机推荐

  1. WindowManager massge和handler

    在一个可移动浮动按钮的demo源码学习中,有一些WindowManager的使用,在此做下总结. 1.翻译过来就是窗口管理,是和应用框架层的窗口管理器交互的接口,通过 mWindowManager = ...

  2. ARP报文发送的可视化实现

    一.安装VS2013,下载wpdpack,为VS2010配置WinpCap环境: ⑴首先在View中选择Property Manager,然后展开工程,再展开Debug|Win32 ,接着右击 Mir ...

  3. 闭包和重写函数 返回IE浏览器版本号

    开发过程中我们有时候需要知道IE的版本号,我们知道得到IE的版本号的方法: var v = 3, div = document.createElement('div'), all = div.getE ...

  4. centos 7 安装和配置vncserver

    前期准备: 关闭防火墙,centos的防火墙是firewalld,关闭防火墙的命令 systemctl stop firewalld.service 关闭enforce setenforce 0 ce ...

  5. CSS常用布局学习笔记

    水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...

  6. JS获取当前时间戳的方法

    JavaScript 获取当前时间戳:第一种方法: var timestamp = Date.parse(new Date()); 结果:1280977330000第二种方法: var timesta ...

  7. weex逻辑控制

    在WEEX中,有if 和 repeat 两种逻辑运算,需要注意的是,逻辑控制不能够作用于<template>这样的根节点. if 控制判断条件true/false直接对节点进行操作,if= ...

  8. Linux命令dos2unix 从windows转换到linux --- nuix2dos从linux转换到windows

    dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...

  9. 【转】安全传输协议SSL和TLS及WTLS的原理

    一.首先要澄清一下名字的混淆 1.SSL(Secure Socket Layer)是Netscape公司设计的主要用于WEB的安全传输协议.这种协议在WEB上获得了广泛的应用. 2.IETF将SSL作 ...

  10. poj2833

    //poj2833优先队列.数据量太大,而且没有必要全部排序. //优先队列 //* #include<iterator> #include <stdio.h> #includ ...