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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

preventDefault：

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

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

//假定有链接
<a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>

var a = document.getElementById("testA");
a.onclick =function(event){
//阻止默认行为
event.preventDefault();
}

stopPropagation：

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

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

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

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

return false：

现在很多js代码都直接使用jQuery来写，在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。 但是使用原生js写时，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;};

使用jQuery方法时，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="testC">cnf2e.com</a></li></ul></div>$("#testC").on('click',function(){ return false;});

原文链接：http://www.cnblogs.com/w158357686/p/4380472.html