href表达式<a href="javascript:;"></a>做什么?

我不时地在网页上看到下面的href。然而,我不明白这是要做什么或技术。有人能详细说明吗?

<a href="javascript:;"></a>
426528 次浏览

这是一种让链接在点击时完全不做任何事情的方法(除非Javascript事件绑定到它)。

这是一种运行Javascript而不是跟随链接的方式:

<a href="Javascript: doStuff();">link</a>

当没有javascript要运行时(就像你的例子),它什么也不做。

<a href="javascript:void(0);"></a>

javascript:告诉浏览器要编写javascript代码

<a href="javascript:alert('Hello');"></a>

是:

<a href="" onclick="alert('Hello'); return false;"></a>

基本上不是使用链接来移动页面(或锚点),使用这个方法启动一个javascript函数。

<script>
function doSomething() {
alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

单击该链接将触发警报。

<a>元素是无效的HTML,除非它具有hrefname属性。

如果你想让它正确地呈现为链接(如下划线,指针等),那么只有当它具有href属性时才会这样做。

因此,这样的代码有时被用作一种创建链接的方式,但不必在href属性中提供实际的URL。开发人员显然希望链接本身不做任何事情,这是他所知道的最简单的方法。

他可能在其他地方有一些javascript事件代码,当链接被点击时触发,这将是他想要实际发生的,但他希望它看起来像一个正常的<a>标签链接。

一些开发人员使用href='#'来达到同样的目的,但是这会导致浏览器跳转到页面的顶部,这可能是不需要的。而且他不能简单地让href为空,因为href=''是一个回到当前页面的链接(即它会导致页面刷新)。

有办法解决这些问题。在href中使用空的Javascript代码就是其中之一,尽管这不是最好的解决方案,但它确实有效。

有几种机制可以避免链接到达目的地。题目中的答案不是很直观。

一个更清晰的选项是使用href="#no",其中#no是文档中未定义的锚。

您可以使用更语义化的名称,如#disable或#action来增加可读性。

该方法的好处:

  • 避免“排名靠前”;空href="#"
  • 避免使用javascript

缺点:

  • 必须确保在文档中没有使用锚名。
  • URL更改为将(不存在的)锚包含为片段,并创建一个新的浏览器历史记录条目。这意味着点击“后退”;单击链接后的按钮将不会像预期的那样运行。

由于<a>元素不充当链接,在这些情况下,最好的选择不是使用<a>元素,而是使用<div>并提供所需的类似链接的样式。

请参考:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

旧线程,但我认为我只是补充,开发人员使用这个结构的原因不是为了创建一个死链接,而是因为javascript url出于某种原因不能正确地传递对活动html元素的引用。

例如,handler_function(this.id)可以作为onClick工作,但不能作为javascript URL。

因此,在编写迂规的标准代码(需要手动调整每个超链接的调用)和稍微不标准的代码(可以编写一次并在任何地方使用)之间,需要做出选择。

它用于在href中编写js代码,而不是像onclick这样的事件监听器,并避免href中的#链接,以使a标记对HTML有效。

有趣的事实

我研究了如何在href属性中使用javascript:,得到的结果是我可以在其中写入多行 !

<a href="
javascript:
a = 4;
console.log(a++);
a += 2;
console.log(a++);
if(a < 6){
console.log('a is lower than 6');
}
else
console.log('a is greater than 6');
function log(s){
console.log(s);
}
log('function implementation working too');


">Click here</a>
  • 测试在chrome版本68.0.3440.106(正式版本)(64位)

  • 在Firefox Quantum 61.0.1(64位)中测试

由于这是一个样式问题,而不是用无效的语法污染HTML,你可以/应该使用W3有效解决方案:

  1. 正确格式化HTML,不包含href,遵循按钮的W3可访问性指南. HTML。
  2. 使用CSS来修复在控件上应用可点击UX效果的初始目标。

这里有一个生活的例子让你尝试用户体验。

超文本标记语言

    <a role="button" aria-pressed="false">Underlined + Pointer</a>
<a role="button" aria-pressed="false" class="btn">Pointer</a>

CSS

    a[role="button"]:not([href]):not(.btn) { text-decoration: underline; }
a[role="button"]:not([href]) { cursor: pointer; }
    1. Use that java script to Clear an HTML row Or Delete a row using the id set to a span and use JQuery to set a function to that span's click event.
2. Dynamically set the div html to a string variable and replace {id} with a 1 or 2 etc. cell of a larger div table and rows


<div class="table-cell">
<span id="clearRow{id}">
<a href="javascript:" style-"color:#c32029; align:right; font-size:8pt;">Clear</a>
</span>
</div>


<div class="table-cell">
<span id="deleteRow{id}">
<a href="javascript:" style-"color:#c32029; align:right; font-size:8pt;">Delete</a>
</span>
</div>


//JQuery - Clear row
$("#clearRow" + idNum).click(function(){
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
});


//JQuery to remove / delete an html row
$("#deleteRow" + idNum).click(function(){
//depending upon levels of parent / child use 1 to many .parent().parent().parent()
$(this).parent().remove();
});
我一直在寻找一种解决方案,不刷新页面,但在ipad和手机上打开菜单项。 我在手机上也试过,它工作得很好

<a href="#" onclick="return false;">Dr</a>