以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
当前回答
如果您使用链接来执行一些JavaScript代码(而不是使用D4V360这样的span),请执行以下操作:
<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>
如果您使用带有onclick的链接进行导航,请不要在JavaScript关闭时使用href=“#”作为回退。当用户单击链接时,这通常非常令人讨厌。相反,如果可能,请提供onclick处理程序将提供的相同链接。如果无法做到这一点,请跳过onclick,只需在href中使用JavaScript URI。
其他回答
在五年前,链接</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(),以确保单击按钮时它不会跟随链接。此选项称为优雅降级。
不要将链接仅用于运行JavaScript。
使用href=“#”将页面滚动到顶部;使用void(0)会在浏览器中产生导航问题。
而是使用链接以外的元素:
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
并使用CSS设置样式:
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}
javascript:void(0)将在将来弃用,因此您应该使用#。
只使用#会做出一些有趣的动作,所以如果你想节省JavaScript bla、bla、的输入工作量,我建议使用#self,。
您可以使用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
});