首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

js中preventDefault、stopPropagation、return false三者之间的区别及使用

2014年05月26日 发布 阅读(289) 作者:懒炖

preventDefault:

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

我们都知道,链接<a>的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:

  1. //假定有链接<a href="http://www.test.com/" id="testA" >test</a>
  2. var a = document.getElementById("testA");
  3. a.onclick =function(event){
  4. event.preventDefault();
  5. }

上面代码会阻止<a>链接跳转

stopPropagation

stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:

  1. <div id='div' onclick='alert("div");'>
  2. <ul onclick='alert("ul");'>
  3. <li onclick='alert("li");'>test</li>
  4. </ul>
  5. </div>

上面的代码,会依次触发alert(“li”),alert(“ul”),alert(“div”),这是事件冒泡。

当我们需要阻止冒泡时,就得使用stopPropagation了,

  1. <div id='div' onclick='alert("div");' >
  2. <ul onclick='alert("ul");'>
  3. <li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>
  4. </ul>
  5. </div>

上面代码只会提示alert(‘li’);

return false

现在很多js代码都直接使用jQuery来写,在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。但是使用原生js写时,return false只会阻止默认行为。下面两段代码说明

使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡

  1. <div id='div' onclick='alert("div");'>
  2. <ul onclick='alert("ul");'>
  3. <li id='ul-a' onclick='alert("li");'><a href="http://www.test.com" id="testB">test.com</a></li>
  4. </ul>
  5. </div>
  1. var a = document.getElementById("testB");
  2. a.onclick = function(){
  3. return false;
  4. };

使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡

  1. <div id='div' onclick='alert("div");'>
  2. <ul onclick='alert("ul");'>
  3. <li id='ul-a' onclick='alert("li");'><a href="http://www.test.com" id="testC">test.com</a></li>
  4. </ul>
  5. </div>
  1. $("#testC").on('click',function(){
  2. return false;
  3. });
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •