关于a href="javascript:void(0)"的问题

Question

求教大家为什么要在代码中加入a href="javascript:void(0)"这样的代码呢？这个的作用是什么？如果不想让这个超链接跳转为什么不直接取消掉href属性呢？还有求教在a标签属性上直接用onClick属性绑定监听函数和用js ele.onclick = fn;有什么区别呢？书上一直说要js html css三者分离，我觉得这种行为就是和这个原则完全背道而驰啊，可是我看到很多网站上都是这个样子的啊 为什么呢？

Answer 1

回答1: 为什么要在代码中加入a href="javascript:void(0)"这样的代码呢？这个的作用是什么？如果不想让这个超链接跳转为什么不直接取消掉href属性呢？

—— 首先，a标签具有跳转作用；使用javascript:void(0)的目的是为了阻止a链接的默认行为，方便让js绑定事件不受干扰；
其次，我认为取消掉href属性有违背w3c规范，href属性属于a的默认存在的，如果不加首先就通过不了html页面验证吧（当然html页面验证取决于个人是否尊崇w3c规范）。

回答2: 在a标签属性上直接用onClick属性绑定监听函数和用js ele.onclick = fn;有什么区别呢？

—— 首先，以上2者都是为元素对象绑定onclick事件，无本质区别；
其次，如果非要说有区别的话，就主要是标签属性上直接用onClick，让html和js搅在一起不利于后期代码的修改编辑等等（也就是没有做到行为js与结构html的分离，而 ele.onclick = fn; 就做到了分离）；

回答3: 书上一直说要js html css三者分离，我觉得这种行为就是和这个原则完全背道而驰啊，可是我看到很多网站上都是这个样子的啊 为什么呢？

—— 首先，行为，结果，表现分离是在web开发发展过程中被逐步提出并完善的一种开发规则（或者说良好习惯），即使你不遵循也可以达到开发目的（但是建议使用这个好习惯这对持续开发是有益的）；
其次，我觉得可以从两点分析现在很多网站上还是这个样子：因为，1目前存在的一些网站就是在经历web发展过程而继续存在着的，但是网站技术还停留在曾经未进行更新；2目前的一些开发人员并未对自己的开发技术进行持续更新（或者说他们没有接受这项规则），所以这样的人员开发出来网站的依然那样。

＊ 建议：一个规则的遵行是建立在个人意愿上的，所以程序员如果具备不断试错的能力，用实际的行动使用对比两者之间的差别找到适用自己认为对的方式就行（当然一般我们可以通过学习快速获取他人的经验，就像以上提及的规则）。

Answer 2

其实如果你要阻止超链接的跳转，其实可以直接在你的事件回调函数里面直接return false，这样js.css.html就分离开了。其实这种javascript:viod是不被推荐的。

Answer 3

1. html的语义化。链接要使用 a 标签，而 a 标签中 href 属性又是必须的（没有这个属性的话， a 的默认样式不会表现出来）。

2. href="javascript:void(0);" 的作用是点击这个链接不会发生任何动作，包括 a 标签默认的跳转和js脚本的运行。

3. js html css分离指的是逻辑功能、页面结构、页面样式三者分离。在 a 标签属性上直接用 onClick 属性绑定监听函数并没有违反这一原则，因为在 a 标签中仅仅引用了函数名，而这个函数名的逻辑功能依然是在js脚本中实现的，是易于维护的。

Answer 4

1)<a href="javascript:void(0)">link</a>目的是位了不发生链接跳转
如果<a >link</a>将不显示为一个超链接
2)在a元素上使用onClick属性绑定回调函数和使用 someAElement.onClick函数绑定回调函数在使用上是有区别的
一个区别就在于作用域的不同，onclick回调绑定的函数要处于全局作用域下，不利于代码的封装及视图和行为的分离
3)JS、HTML、CSS三者分离,HTML+CSS负责展示页面，JS负责处理页面交互
响应式的页面，就遵循了这个原则，HTML代码不变，通过CSS的变化，展示不同的页面效果。同样的HTML+CSS，引入不同的JS交互代码实现不同的交互效果

Answer 5

不加href属性的<a>不会表现为一个链接，当然你可以用CSS让它表现得像一个链接。

如果<a>的行为是用JS来定义的话，一般都会用href="#"或者href="javascript:void(0)"，但前者会在地址栏中加上#，所以后者最干净。