由href return false 来看阻止默认事件

很多时候我们都想阻止一个a ?link的href跳转。

1	`<a onclick=”return` `false;” href=”www.360.cn”>click</a>`

以上代码可以达到这个效果

有一点要注意

function stop(){

return false;

}

<a onclick=”stop();” href=”www.360.cn”>click</a>

这么写是不会阻止默认事件的，stop()反回false， ?onclick却没有返回值只有事件的返回值是false时才会阻止默认事件所以要这么写：

1	`<a onclick=”return` `stop();” href=”www.360.cn”>click</a>`

这样就会有效果，那么如果是用绑定事件的方式呢会怎么样呢

qwrap是用标准的事件绑定方式来做的可以用它来测试

<a id=”testa” href=”www.360.cn”>click</a>

W(‘#testa’).click(function(){ return false;});// 这是一个标准的绑定事件方法

测试后发现 ie是可以阻止默认事件的 ?标准浏览器 chrome firefox等却没有能阻止直接发生了跳转

分析后发现因为标准浏览器使用 addEventListener 绑定事件而该方法是没有返回值的，可参见w3c文档没有返回值，返回值当然不会是false所以继续执行href 。

而ie使用attachEvent的方法这个方法是有returnValue的参见?http://msdn.microsoft.com/en-us/library/ie/aa703898(v=vs.85).aspx

所以成功阻止了默认事件，

那么使用addEventListener绑定事件如何阻止呢？

虽然addEventListener 不能有返回值但是它有一个方法 preventDefault() 专门用来阻止默认事件，

1	`W(‘#testa’).click(function(e){ e.preventDefault();});`

这样就可以成功阻止了.

所以用addEventListener绑定的事件必须用preventDefault()来阻止默认事件

但是又有一个现象

1	`$(‘#testa’).click(function(){return` `false;});`

query 却可以做到，以上代码运行成功在所有浏览器

这是为什么？这并不是jquery可以例外只是它悄悄的调用了preventDefault() 和 stopPropagation()

jqeury会把事件的响应函数封装在一个dispach的函数里如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()

所以在jquery中 return false 等价于：

e.preventDefault()

e.stopPropagation()

return false;

这三个

转载于:https://www.cnblogs.com/gina/p/9216223.html

由href return false 来看阻止默认事件相关推荐

React:阻止默认事件
在html页面中直接通过return false即可阻止默认事件 <a href="#" onclick="alert('阻止跳转');return false&q ...
jquery阻止默认行为_Jquery 事件冒泡以及阻止默认事件
1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:xx $("#xx").click(function(e) ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
js为链接绑定点击事件并且附带return false;来阻止跳转
<!DOCTYPE HTML> <html><head><meta charset="gb2312" /><title> ...
JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇先来看一段实例: js: var $input = document. ...
JS标签中阻止默认事件的发生
若html标签中定义了两个事件(包含一个自定义函数),那么系统会先执行用户自定义的函数,然后执行标签默认函数.如果想要在执行完自定义函数之后阻止系统默认函数的执行,可以进行如下设置: 因为html标签 ...
js阻止默认事件（a标签跳转），阻止事件冒泡
最近刚学习完js基础,今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记,于是写这篇文章算是做一个总结,也是加深一下印象. 1.阻止默认事件在html中有很多自带默认事件的元素,很典型的例子:a ...
jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
Js阻止事件冒泡与阻止默认事件
1.event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行.不让事件向document上蔓延,但是默认 ...

由href return false 来看阻止默认事件

由href return false 来看阻止默认事件相关推荐

最新文章

热门文章