event.preventDefault()和event.stopPropagation()

event.preventDefault()
event.stopPropagation() 

propagation 这个单词的意思是：传播，英 [ˌprɒpə'ɡeɪʃ(ə)n]  n.传播;扩展;宣传;培养
stopPropagation 也就是停止传播的意思，这个事件传播的过程和冒泡很像．事件会传递给外层的容器．

prevent default 单词就简单了，阻止默认的事件．

1.preventDefault：


preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。
既然是说默认行为，当然是元素必须有默认行为才能被取消。

什么元素有默认行为呢？

如链接<a>，提交按钮<input type=”submit”>等。
当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。

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

//假定有链接
<a href="http://www.***.com/" id="testA" >abc</a>var a = document.getElementById("testA");
a.onclick =function(event){
//阻止默认行为
event.preventDefault();
}

2.stopPropagation：


stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

什么是冒泡事件？
如 在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。

stopPropagation就是阻止目标元素的事件冒泡到父级元素。如：

<div id='div'  onclick='alert("div");'>
   <ul  onclick='alert("ul");'>
      <li onclick='alert("li");'>test</li>
   </ul>
</div>

上面的代码，我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

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


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

这时单击”test”，只会提示alert(‘li’);

3.return false：


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

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

阅读量: 741
发布于:
修改于: