href 和 onclick那些事

freeshare中发现一个bug:

<a href="javascrit:void(0)" onclick="displayIt(this)"></a>

现象:在chrome中可以正常执行;360极速模式中不可以正常执行,页面url没有跳转;火狐及IE中不可以执行,并且会跳转到javascrit:void(0)页面

bug原因:javascript拼写错误!修改后都可以正常执行了。However,事情没有这么简单,不然每个浏览器的反应为什么会各不相同。经查阅,href执行的是浏览器内置的脚本,onclick执行的是自定义的脚本,问题就是哪个会先被执行。

链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。

即: href="javascrit:void(0)" onclick="displayIt(this); return false;" 这样不管href是什么,对不对,都不会执行href里面的内容了。这可以解释火狐和IE了,但是还是无法解释chrome为什么这么神奇,360也许没有更新最新的chrome版本所以和谁也不一样吧。历史上chrome曾经不支持return false 但是现在已经debug了(code.google.com/p/chromium/issues/detail

关于 return false 还有一些tips:

jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()。所以在jquery中 return false 等价于:

e.preventDefault()

e.stopPropagation()

return false;

这三个

所以,return false 的作用大于preventDefault(阻止默认事件)和 stopProgagation(阻止向上冒泡),使用时注意差别。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,554评论 1 19
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,200评论 0 0
  • 什么是事件: 我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠...
    张松1366阅读 6,826评论 1 6
  • 郁闷,大学不好玩,
    秋水长天共一色阅读 126评论 0 0
  • “路边的栀子花,洁白而芬芳,默默绽放。” 01 上周认识十多年的小君君突然跟我说,她喜欢上了一个男孩。小君君是公务...
    白格姨妈阅读 305评论 1 1