讨论：A标签要不要避免使用 javascript:void(0)

sshe 发布于2019-08-01 15:20 / 3239人阅读

摘要：某天讨论了要不要避免标签加，最后还是决定加甲在某些里是。鼠标在单击中键时会新建浏览器标签页打开这个链接，这会误导用户。甲乙标签要有属性，不然没有也不会有默认的样式，这样就得用模拟。最保险稳妥的还是在标签中加，附上。

甲是我的同事，乙是我。
某天讨论了要不要避免 a 标签加 javascript: void(0)，最后还是决定加！

甲：

在某些IE里是bug。
使用更好，这样页面还不会跳转到最顶端

乙：

使用有个问题，点击后 windows.location 变了。这个被记录到浏览器的 history 了，这样不利于浏览器后退前进操作。

还有在 IE 下可能会在点击后出现虚线外框，这个样式很难看, 且没法修改。

鼠标在单击中键时会新建浏览器标签页打开这个链接，这会误导用户。

另外，会让浏览器脚本解析文档搜索 nogo 锚点，这个影响虽小，但也不可取。

暂时没有非常完美的方案代替 javascript:void(0);

网上有些人是写一个类然后用 $(".cancel_link").click(function(){}); 之类的脚本代替。

甲：

还有就是必须用标签么？ 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:

Cancel this action

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 模拟还未生效，用户已经点击了链接，这样体验会蛮差的。
链接文本  这样的标签默认是没有 link 样式，在 rss 中输出或其他没有 .cancel_link 样式的地方都是显示成文本状态，没人知道这个是可点击的链接。
最保险稳妥的还是在 a 标签中加 href ，附上 js 。只不过会显得有点不够清洁。

原文链接：http://zaishanda.com/post/4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49853.html

讨论：A标签要不要避免使用 javascript:void(0)

摘要：某天讨论了要不要避免标签加，最后还是决定加甲在某些里是。鼠标在单击中键时会新建浏览器标签页打开这个链接，这会误导用户。甲乙标签要有属性，不然没有也不会有默认的样式，这样就得用模拟。最保险稳妥的还是在标签中加，附上。甲是我的同事，乙是我。某天讨论了要不要避免 a 标签加 javascript: void(0)，最后还是决定加！甲：在某些IE里是bug。使用更好，这样页面还不会...

liuhh 2019-08-19 18:31 评论0 收藏0
从0到1使用VUE-CLI3开发实战(六)：这是一个有代码洁癖的项目

摘要：从到使用开发实战六这是一个有代码洁癖的项目一个小故事一天我路过一座桥，碰巧看见一个人想跳河自杀。配置什么是是一个开源的代码检查工具，由于年月创建。使用编写，这样既可以有一个快速的运行环境的同时也便于安装。从0到1使用VUE-CLI3开发实战(六)：这是一个有代码洁癖的项目一个小故事一天我路过一座桥，碰巧看见一个人想跳河自杀。我跑过去对他大喊道：别跳，别死啊。为什么不让我跳？他说。...

genefy 2019-08-26 13:28 评论0 收藏0
Eslint规则

摘要：禁止使用禁止使用数组构造器禁止使用按位运算符禁止使用或禁止子句参数与外部作用域变量同名禁止给类赋值禁止在条件表达式中使用赋值语句禁止使用禁止修改声明的变量禁止在条件中使用常量表达式禁止使用禁止在正则表达 no-alert: 0,//禁止使用alert confirm prompt no-array-constructor: 2,//禁止使用数组构造器 no-bitwise: 0,//禁...

刘明 2019-08-26 13:37 评论0 收藏0
Eslint 规则说明

摘要：引用自在用的时候，不小心引入了，发现自己不会写代码了泪崩，这里写下笔记，资料是引用其他大神的文章。引用自： http://blog.csdn.net/helpzp2008/article/details/51507428 在用vue的时候，不小心引入了Eslint，发现自己不会写代码了...泪崩，这里写下笔记，资料是引用其他大神的文章。 no-alert: 0,//禁止使用aler...

Y3G 2019-08-26 11:50 评论0 收藏0
ESLINT STANDARD 规范

摘要：规范规则的错误等级有三种或者关闭规则。或者打开规则，并且作为一个警告不影响。 ESLINT STANDARD 规范规则的错误等级有三种： off 或者 0：关闭规则。 warn 或者 1：打开规则，并且作为一个警告（不影响exit code）。 error 或者 2：打开规则，并且作为一个错误（exit code将会是1）。 // 禁止使用alert confirm prompt ...

李文鹏 2019-08-26 13:51 评论0 收藏0