甲是个人同事,乙是我。
某天讨论了要不要避免 a 标签加 javascript: void(0)
,最后仍是决定加!javascript
甲:css
<a href="javascript: void(0)">
在某些IE里是bug。
使用 <a href="#nogo">
更好,这样页面还不会跳转到最顶端html
乙:java
使用 <a href="#nogo">
有个问题,点击后 windows.location 变了。这个被记录到浏览器的 history 了,这样不利于浏览器后退前进操做。windows
还有 <a href="#nogo">
在 IE 下可能会在点击后出现虚线外框,这个样式很难看, 且无法修改。浏览器
鼠标在 <a href="#nogo">
单击中键时会新建浏览器标签页打开这个连接,这会误导用户。post
另外, <a href="#nogo">
会让浏览器脚本解析文档搜索 nogo 锚点,这个影响虽小,但也不可取。this
暂时没有很是完美的方案代替 javascript:void(0);
spa
网上有些人是写一个 <a>
类而后用 $('.cancel_link').click(function(){});
之类的脚本代替。code
甲:
还有就是必须用 <a>
标签么? span
不行么
http://stackoverflow.com/questions/134845/href-tag-for-javascript-links-or-javascriptvoid0
乙:
只有 a 标签有 默认的 :hover 属性
若是用 span 或 div 代替,就得用 js 模拟 hover,好比增长一个 hover 类: span.hover{}
也有人建议用 button 代替 a。 但 button 在某些平台的样式无法调整。
甲:
Simple code example
Your HTML:
<a>Cancel this action</a>
Your CSS:
a { cursor: pointer; color: blue; } a:hover,a.hover { text-decoration: underline; }
Your JavaScript:
// Cancel click event $('.cancel-action').click(function(){ }); // Hover shim for Internet Explorer 6 and Internet Explorer 7. $(document.body).on('hover','a',function(){ $(this).toggleClass('hover'); });
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
乙:
a 标签要有 href 属性,否则没有 hover 也不会有默认的 cursor:pointer
样式,这样就得用 js 模拟。
也许 js 模拟还未生效,用户已经点击了连接,这样体验会蛮差的。<a>连接文本<a>
这样的标签默认是没有 link 样式,在 rss 中输出或其余没有 .cancel_link
样式的地方都是显示成文本状态,没人知道这个是可点击的连接。
最保险稳妥的仍是在 a 标签中加 href ,附上 js 。只不过会显得有点不够清洁。