html的a标签后续绑定js事件,href属性设置为#还是javascript:;或者javascript:void(0);好?

大超超
  • 496

一直有这个问题,在网上找答案都没有个统一、清晰的思路,今天在看bootstrap文档时又遇到了(详见:“如果你选择使用连接标签的话,在iOS设备上需要一个href="#"配合点击事件”),所以想在sf里问问看有没有熟悉这方面知识的人给解答一下,谢谢!
另外:bootstrap关于“iOS设备上需要一个href="#"”里的href="#"是不是等价于href="javascript:;"
相关问题已在站内搜索,列出如下:
http://segmentfault.com/q/1010000000355766
http://segmentfault.com/q/1010000000339082

不需要很长的回答,仅一两句或者一个list能给出一个理解思路就可以了,再次谢谢!

回复
阅读 19k
6 个回答

我认为这些方式都不好。如果不用跳转,就不要用a。如果非要用a,比较好的是剥离js,绑定click事件时return false。想要a hover时候的样式,可以用css完成,不必要a标签实现。

我觉得你搜到的两个问题的答案都回答得很不错了,讲了每种方式的劣式。

文档中“如果你选择使用连接标签的话,在iOS设备上需要一个href="#"配合点击事件。” 我的理解是用#表示这里非跳转链接,配合js完成工作后,记得return false。

(PS:下面的讨论中
1.怡红公子说“我记得女神说过,return false;会在console中报错,最好用event.preventDefault();来着”
2.P酱: “如果是onclick那么用return false是对的。如果是Listener就只能用event.preventDefault()”
供参考)

不一样,#是跳转到锚点,没指定就跳到页面首行去了,javascript:;则是执行一个空的js命令,不会进行跳转,具体你给的网址都写的挺清楚了。我猜测原文的意思只是说要给a标签添加上href属性的意思吧,通过读取href="#"这个属性插件达到阻止跳转的目的。

另外这句话的原文

iOS devices require an href="#" for click events if you would rather use an anchor.

继续补上Bootstrap的相关代码:

  Alert.prototype.close = function (e) {
    var $this = $(this)
      , selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    $parent = $(selector)

    e && e.preventDefault()

    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

    $parent.trigger(e = $.Event('close'))

    if (e.isDefaultPrevented()) return

    $parent.removeClass('in')

    function removeElement() {
      $parent
        .trigger('closed')
        .remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent.on($.support.transition.end, removeElement) :
      removeElement()
  }

如果我没看错以及理解错代码的话,加上href='#'的目的应该是用来判断是否弹窗标签而已吧。个人理解,如有错误恳请指正。

不懂bootstrap……
从“关闭图标用来关闭模态对话框或警告框”的概念来看,都是用js阻止默认事件并绑定关闭事件,应该都是效果一致的,仅仅用来保证a标签的css效果而已。区别是代码长度不同而已。


update:补充一下上面保证css效果的说法。

IE6(QS)IE7(QS)IE8(Q)下,如果a标签没有href属性,则css引擎会拒绝承认它是一个链接,具体地说,a:hover的设定无效。这是一个让人比较难受的bug。
注:这里Q代表Quirks Modes 即混杂模式, S 代表 Standards Modes 即标准模式。参考浏览器兼容性问题综述——正确的认识浏览器兼容性问题

这是为啥a必须增加href属性的原因。

至于href属性中写的是啥完全不重要,@怡红公子 很厚道地发出了源码,可以看到里面明确写明了(对于a标签)阻止默认事件。使用href="#"只是一种惯例,具体在题主给出的链接中已经有很好的论述了。

javascript:; 或者 javascript:void(0); 在 IE6 里面有 ajax 事件可能会出现不执行的问题,我一般给 a 标签加空锚点的方式,比如 anything

我用了###怎么直接跳到主页了呢

我觉得javascript:void(0);好,并且一直在用。用空描点的,在angularjs等环境里试下....

你知道吗?

宣传栏