以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

我将href=“#”用于我希望为其设置虚拟行为的链接。然后我使用以下代码:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

这意味着,如果href等于哈希(*=“#”),它将阻止默认链接行为,因此仍允许您为其编写功能,并且不会影响锚点单击。

其他回答

您可以使用href并删除所有只有哈希值的链接:

HTML格式:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

让禁用JavaScript的用户可以访问您的网站很好,在这种情况下,href指向执行与正在执行的JavaScript相同操作的页面。否则,我使用带有“return false;”的“#”来阻止其他人提到的默认操作(滚动到页面顶部)。

在谷歌上搜索“javascript:void(0)”提供了有关此主题的大量信息。其中一些,比如这篇提到了不使用void(0)的原因。

不要将链接仅用于运行JavaScript。

使用href=“#”将页面滚动到顶部;使用void(0)会在浏览器中产生导航问题。

而是使用链接以外的元素:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

并使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

我将href=“#”用于我希望为其设置虚拟行为的链接。然后我使用以下代码:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

这意味着,如果href等于哈希(*=“#”),它将阻止默认链接行为,因此仍允许您为其编写功能,并且不会影响锚点单击。

在五年前,链接</a>或链接</a href=“javascript:void(0)”onclick=“myJsFunc();”>Link</a>或者其他任何包含onclick属性的操作都是可以的,但现在可能是一种糟糕的做法。原因如下:

它促进了引人注目的JavaScript的实践——事实证明,这很难维护,也很难扩展。更多信息请参见Unobrusive JavaScript。你正在花时间编写令人难以置信的过于冗长的代码——这对你的代码库几乎没有好处(如果有的话)。现在有更好、更容易、更可维护和可扩展的方法来实现期望的结果。

低调的JavaScript方式

只是根本没有href属性!任何好的CSS重置都会处理掉丢失的默认光标样式,所以这不是问题。然后使用优雅而不引人注目的最佳实践来附加JavaScript功能,因为JavaScript逻辑保留在JavaScript中,而不是标记中,因此更易于维护。当您开始开发需要将逻辑拆分为黑盒组件和模板的大型JavaScript应用程序时,这一点至关重要。在大型JavaScript应用程序架构中了解更多信息

简单代码示例

//取消单击事件$('.cancel action').click(function(){alert('取消操作发生!');});//Internet Explorer 6和Internet Explorer 7的悬停垫片。$(document.body).on('over','a',function(){$(this).tggleClass('over');});{光标:指针;颜色:蓝色;}a: 悬停,a.hover{文本装饰:下划线;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><a class=“cancel action”>取消此操作</a>

黑框Backbone.js示例

有关可扩展的、黑框的Backbone.js组件示例,请参阅此处的jsfiddle示例。请注意我们如何利用不引人注目的JavaScript实践,并且在少量代码中有一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突。太神了

笔记

省略a元素上的href属性将导致无法使用tab键导航访问该元素。如果希望通过tab键访问这些元素,可以设置tabindex属性,或者使用button元素。您可以很容易地将按钮元素设置为看起来像Tracker1的答案中提到的普通链接。省略a元素上的href属性将导致InternetExplorer6和InternetExplorer7不采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序来通过a.hover实现这一点。这是完全可以的,如果你没有href属性,没有优雅的降级,那么你的链接无论如何都不会工作,你会有更大的问题需要担心。如果您希望在禁用JavaScript的情况下仍能执行操作,那么可以使用带有href属性的a元素,该元素指向某个URL,该URL将手动执行操作,而不是通过Ajax请求或其他方式执行操作。如果您正在执行此操作,则需要确保在单击调用中执行event.prpreventDefault(),以确保单击按钮时它不会跟随链接。此选项称为优雅降级。