HTML中JavaScript链接的href值选择
技术背景
在HTML开发中，有时需要创建仅用于运行JavaScript代码的链接。常见的做法是为<a>标签设置href属性，值通常为#或javascript:void(0)，并在onclick事件中调用JavaScript函数。然而，这两种选择在功能、页面加载速度、验证等方面存在差异。
实现步骤
使用#作为href值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用#作为href值</title>
</head>
<body>
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>
<script>
function myJsFunc() {
alert("myJsFunc");
}
</script>
</body>
</html>使用javascript:void(0)作为href值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用javascript:void(0)作为href值</title>
</head>
<body>
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
<script>
function myJsFunc() {
alert("myJsFunc");
}
</script>
</body>
</html>核心代码分析
#作为href值的问题
- 页面滚动：点击链接时，页面会滚动到顶部，除非在onclick事件中返回false。
- 错误处理：如果调用的JavaScript函数抛出错误，return false不会执行，可能导致意外的页面滚动。
- 团队协作：团队开发中，开发者可能忘记在onclick中使用return doSomething()，而只是使用doSomething()。
javascript:void(0)作为href值的优势
- 避免页面滚动：点击链接时不会导致页面滚动。
- 错误处理：即使JavaScript函数抛出错误，也不会影响页面。
- 动态绑定：可以更方便地动态绑定事件。
其他解决方案
使用<button>元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用button元素</title>
<style>
button.link {
display: inline-block;
position: relative;
background-color: transparent;
cursor: pointer;
border: 0;
padding: 0;
color: #00f;
text-decoration: underline;
font: inherit;
}
</style>
</head>
<body>
<p>A button that looks like a <button type="button" class="link" onclick="myJsFunc()">link</button>.</p>
<script>
function myJsFunc() {
alert("myJsFunc");
}
</script>
</body>
</html>无href属性的<a>标签结合非侵入式JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无href属性的a标签</title>
<style>
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<a class="cancel-action">Cancel this action</a>
<script>
// Cancel click event
$('.cancel-action').click(function(){
alert('Cancel action occurs!');
});
// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
$(this).toggleClass('hover');
});
</script>
</body>
</html>最佳实践
- 语义化标签：如果链接仅用于执行JavaScript代码，考虑使用<button>元素代替<a>标签，因为<a>标签主要用于导航。
- 非侵入式JavaScript：避免在HTML标签中直接使用onclick属性，而是通过JavaScript动态绑定事件，提高代码的可维护性和可扩展性。
- 优雅降级：为链接提供一个有意义的href值，以便在JavaScript禁用时仍能提供基本功能。
常见问题
使用#时页面滚动到顶部
解决方法：在onclick事件中返回false，或者使用event.preventDefault()阻止默认行为。
javascript:void(0)违反内容安全策略
解决方法：使用#并在事件处理程序中调用event.preventDefault()，或者使用href='#void'并确保页面中没有元素的id为void。
无href属性的<a>标签无法通过Tab键导航
解决方法：设置tabindex属性，或者使用<button>元素。