HTML中JavaScript链接的href值选择
lipiwang 2025-05-25 13:57 3 浏览 0 评论
技术背景
在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>元素。
相关推荐
- Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS，秒变React大神
-
梦晨发自凹非寺量子位|公众号QbitAIQwen上新“AI前端工程师”WebDev，一句话开发网页应用。三大件HTML，CSS，JavaScript一个工具全包了，定睛一看用的还是Reac...
- 程序员的 JavaScript 代码该如何让计算机搞懂?
-
出自程序员之手的JavaScript代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进JavaScript引擎内部，一探究竟。作者|LydiaHallie译者|弯月，责编|...
- JavaScript:如何优雅的创建数组?
-
在JavaScript里，有多种方式可以创建数组，下面为你详细介绍：1.使用数组字面量这是最常用的创建数组的方法，使用方括号[]来创建数组。//创建一个空数组letemptyArray...
- Jquery 详细用法
-
1、jQuery介绍(1)jQuery是什么?是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...
- HTML页面基本结构和加载过程
-
大家好，我是皮皮。前言对于前端来说，HTML都是最基础的内容。今天，我们来了解一下HTML和网页有什么关系，以及与DOM有什么不同。通过本讲内容，你将掌握浏览器是怎么处理HTML内容的，...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(一)
-
目录1->概述1.1->整体架构2->文件组织2.1->目录结构2.2->文件访问规则2.3->媒体文件格式3->js标签配置3....
- JavaScript初学者指南
-
如果你刚接触JavaScript，想必已经被“modulebundlersvs.moduleloaders”、“Webpackvs.Browserify”和“AMDvs.Common...
- 前端图片延迟加载详细讲解
-
原文链接：http://www.gbtags.com/gb/share/6366.htm?原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的，没想到下午公司项目出现了一些问题...
- selenium:操作滚动条的方法(8)
-
selenium支持几种操作滚动条的方法，主要介绍如下：使用ActionChains类模拟鼠标滚轮操作使用函数ActionChains.send_keys发送按键Keys.PAGE_DOWN往下滑动...
- jQuery 获取和设置HTML元素
-
jQuery中包含更改和操作HTML元素和属性的强大方法。我们可以通过这些方法来获取HTML元素中的文本内容、元素内容（例如HTML标签）、属性值等。text()方法text()方法可以用...
- JavaScript脚本如何断言select下拉框的元素内容?
-
使用JavaScript脚本断言select下拉框的元素内容，需要考虑页面元素是否加载成功，出错时打印等，主要实现功能功能需包括如下几点：1.等待下拉框元素加载完成（支持超时设置）2.获取下...
- JavaScript图片或者div拖动拖动函数的实现
-
/**拖动图片封装html格式：<imglay-src="${item.Resourcesurl}"alt="${item.ResourcesName}"...
- JavaScript代码怎样引入到HTML中?
-
JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...
- 当你在Vue.js中想要隐藏 `` 标签时，可以这样做:
-
在Vue.js里，要是你想要搞掉`<br>`（换行）标签的效果，通常有几种路子：1.使用CSS嗯，最简单的办法就是用CSS搞定，控制元素的样式，让<br>标签彻底不显示...
- php手把手教你做网站(三十)上传图片生成缩略图
-
三种方法：按比例缩小、图片裁切、预览图片裁切不管使用哪一个都是建立在图片已经上传的基础上；预览裁切上传，如果预览的图片就是原始大小，可以预览裁切以后上传（这里是个假象，下边会说明）；1、上传以后按比例...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)