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

发布于 2022-08-28 01:09:16 字数 665 浏览 9 评论 0

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

避讳 2022-09-04 01:09:17

我认为这些方式都不好。如果不用跳转，就不要用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()”
供参考）

回复收藏 0

不回头走下去 2022-09-04 01:09:17

不一样，#是跳转到锚点，没指定就跳到页面首行去了，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='#'的目的应该是用来判断是否弹窗标签而已吧。个人理解，如有错误恳请指正。~~

回复收藏 0

梦魇绽荼蘼 2022-09-04 01:09:17

不懂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="#"只是一种惯例，具体在题主给出的链接中已经有很好的论述了。

回复收藏 0