href=”javascript:void(0);

孔令文 發表於 2019-6-18 15:43:00

<pre class="best-text mb-10">href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。</pre>
<h2>为什么要使用href=”javascript:void(0);”</h2>
javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，
<a href="javascript：void(0)" onClick="window.open()"> 点击链接后，页面不动，只打开链接
<a href="#" onclick="javascript:return false;"> 作用一样，但不同浏览器会有差异。
 
 
https://www.cnblogs.com/cyjy/p/6182587.html
<h1 class="postTitle">------------------------------分割线--------------------------------------</h1>
<div id="cnblogs_post_body" class="blogpost-body">
<blockquote>
修正一个说法上的bug吧。对于IE6来说，点击后gif暂停bug仅仅发生在“<code>javascript:</code>伪协议未加分号”的情形下。
</blockquote>
给<code><a></code>标签增加href属性，就意味着以下事情：
<ul>
<li>:link选择器可以选择到它</li>
<li>这个a标签可以获得焦点（可以通过<code>tab</code>按键访问到）</li>
<li>在浏览器的默认样式表中，有href属性的<code><a></code>标签才有<code>cursor:pointer</code>的效果（尤其是在低版本的IE上）。</li>
</ul>
绑定了onclick事件的<code><a></code>标签，尤其是它的作用是ajax请求时，基本上我们就用不上这个标签的默认行为，也连接不到的实际页面，一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性，是为了：
<ul>
<li>让<code><a></code>够响应键盘事件并获得焦点（从而屏幕阅读器能够读出背后的内容，增强可访问性）</li>
<li>优雅降级，在网络连接很差，还没有加载到CSS的时候，<code><a></code>依然有手型与正常的link样式。</li>
</ul>
给<code><a></code>标签以href属性，并不连接到实际的页面的方案有：
<ol>
<li><code><a href="#"></a></code></li>
<li><code><a href="#nogo"></a></code></li>
<li><code><a href="##"></a></code></li>
<li><code><a href="###"></a></code></li>
<li><code><a href="javascript:void(0);"></a></code></li>
<li><code><a href="javascript:void(0)"></a></code></li>
<li><code><a href="javascript:;"></a></code></li>
<li><code><a href="javascript:"></a></code></li>
</ol>
他们的体验有细微的差别。
<ul>
<li>1，点击这个链接后，会让页面跳到头部，window.location.href末尾增加#（若window.location.href末尾没有#），除非在js里面捕获onclick事件并阻止默认事件。</li>
<li>2有了初步的语义。但是，如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘。更详细的，详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》</li>
<li>3在chrome中不再默认跳转到页面头部，4在IE11中不再跳转到页面头部。见下方测试。</li>
<li>5~8作用相同，但使用了javascript伪协议。在IE6下面，未加分号的方案6和方案8被点击后，IE6会使得页面中的gif暂停，并且触发onbeforeunload事件(详情参考这里)，IE6认作这个页面有了重定向，并abort之后所有的请求（参考这里）。所以假如你在此之后替换了一个<code><img></code>的src，IE6完全不会完成这个新的请求。</li>
</ul>
我更倾向于使用方案4。
至于语义上LZ这种<code><a href="javascript:void(0)"></code>使用方式，这个贴里已经有了足够详细的回答。我再补充一点，这种情形依然可以做到支持无障碍应用，方法请参考《WAI-ARIA无障碍网页应用属性》。
<hr>
更新，我做了如下的测试：
<pre class=" hljs xml"><code> <p>
 <a href="#">#</a>
 </p>
 <p>
 <a href="##">##</a>
 </p>
 <p>
 <a href="###">###</a>
 </p>
 <p>
 <a href="####">####</a>
 </p>
 <p>
 <a href="#####">#####</a>
 </p>
 <script type="text/javascript">
 var n = 0 ;
 window.onhashchange = function(){
 alert(++n) ;
 }
 </script>
</code></pre>
<ul>
<li>在IE11中，点击###、####和#####时，页面不再跳转到头部</li>
<li>在chrome中，点击##、###、####和#####时，页面不再跳转到头部。</li>
<li>但是在IE11和chrome中，点击所有的<code><a></code>都会造成地址栏的修改，并触发hashchange事件。</li>
</ul>
所以之前说的“###不会造成地址栏的改变”是错误的。
没有大规模测试其他的浏览器，这里做初步猜想：###的意义在于，这是字符数最少的，在所有的浏览器中不会导致跳转到页面头部的锚点。
 
坏处：
1、<code>javascript:</code> 是伪协议，是非标准化的协议 2、不能平稳退化，当用户的浏览器对JS失效或禁用时点击后什么意义都没有 3、大部分搜索引擎不会搜索到它，因为没有内容，从而影响排名（<code>#</code> 是不是也算上空链？空链对搜索引擎也不友好）
<hr>
解决方法：
1、将 <code>javascript:</code>、 <code>#</code>、 <code>###</code> 替换成真实网址，并取消 <code><a></code> 的默认点击事件，<code>return false</code> 或<code>event.preventDefault</code>，如果JS失效了该链接虽功能上打了些折扣，但并没有彻底失效，做到了“平稳退化”
如：本网站侧边栏的“邀请回答”的 <code>http://segmentfault.com/q/1010000000339082#</code> 可以替换成真实地址<code>http://segmentfault.com/q/1010000000339082</code>，然后继续它之后的事件
2、将不该是按钮的改成按钮。好多人都在“烂”用 <code><a></code>，每个人都想让它去完成 <code><button></code> 的事情，可看下这篇文章《你不能创造一个按钮》，讲的有些道理

</div>
 
 
 
https://www.cnblogs.com/pp-cat/p/4308736.html
 

</div>
<div id="MySignature" role="contentinfo">
好记性不如烂笔头，每天记录一点点 
来源：https://www.cnblogs.com/wayneliu007/p/11045509.html

頁: [1]

琼殿技术论坛's Archiver

href=”javascript:void(0);