javascript事件中'return false'详解

  浏览器中有很多异步事件,如click,mouseenter,mouseover等等,当用户执行相应操作之后,触发这个事件,然后执行相应的事件处理函数,一般情况下,我们可以通过三种方式给元素添加事件处理函数:

// HTML事件处理函数:
<input type="button" onclick="return false" />

// DOM0级事件处理函数:
element.onclick = function (){
	return false;
}

// DOM2级事件处理函数:
element.addEventListener(function(){
	return false;
}, false);

   以上使我们根据我们实际的需求添加相应的事件处理函数,但是有些事件,即使你不人为添加相应的事件处理程序,触发相应事件后,浏览器也会进行相应的处理,这就是——事件默认行为(default action)

  通常情况下,默认行为是根据用户的下一步操作执行,如mousedown事件,如果用户此时鼠标在文本上进行移动,此时默认行为是选择文本;如果是在图片上,则是退拽图片。

  然而有的时候,这些默认行为使我们不想发生的,比如在页面上,我们不想拖拽图片后,重新再另外一个窗口中展示该图片,这个时候,我们就需要取消这些默认行为。

  在W3C标准中提出,可以使用preventDefalut()方法来禁止事件的默认行为,但是在我们实际开发过程中,有时候却可以看到使用return false来取消事件默认行为。一下引用W3C中的一段话:

Many implementations additionally interpret an event listener’s return value, such as the value false, to mean that the default action of cancelable events will be cancelled (though window.onerror handlers are cancelled by returning true).

  这段话中,我们可以知道,在实际的实现过程中(浏览器中),额外添加了通过return value的方法来取消默认行为。这里特意强调,并不只是return false 是会取消默认行为,有时候return true也会有同样的效果。但是在大多数情况下,我们都会使用return false来取消默认事件

   附上W3C文档地址:https://www.w3.org/TR/DOM-Level-3-Events/#event-flow-default-cancel

 

  补充:使用时,同时可以停止冒泡行为。

posted @ 2017-10-11 19:56  勤劳的小叶酱  阅读(800)  评论(0编辑  收藏  举报