Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >链接中 href='#' 和 href='###' 的区别以及优缺点

链接中 href='#' 和 href='###' 的区别以及优缺点

作者头像
deepcc
发布于 2018-05-16 06:53:36
发布于 2018-05-16 06:53:36
1.9K0
举报
文章被收录于专栏:deepccdeepcc

     首先,<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 <a> 标签的解释和处理不同。其次,使用 <a> 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 <a href='#'> 是因为使用者没有理解 '#' 和 '###' 的区别。

     简单地说,就是说如果想定义一个空的链接,又不跳转到页面头部,可以写href="###"。详细解释就是'#' 是有特定意义的,如果 '#' 后有内容会被认为是一个标签而从页面找到相应标签跳转到该处,找不到时会跳到页首, '###' 其实就是一个无意义的标签指定,也就是一个 '#' 和不存在的标签 '##' 的组合,页面中找不到命名为 '##' 的 <a> 时该链接就不会发生跳转,也就不会导致执行 onclick 中的内容时突然发生页面跳到页首的问题。'###' 只是一种使用者习惯,如果你愿意,可以随便找一个跳转不到的标签作为命名。说白了"###" 就是一个不是锚点的字符串 浏览器找不到也不会跳到页首,原理就是依赖了网页的报错机制,找不到就不做处理。

     有些人说,不喜欢“###”因为他会改变链接。都是使用一直用javascript:void(0)或者javascript:。href="javascript:void(0);"但也有人说用href="javascript:void(0);"可能会有浏览器兼容问题。在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

     javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。 2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。

   如有其他想法可在下面回帖

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-07-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
九、知识拓展
1、<a href="javascript:js_method();></a>"`
Qwe7
2022/06/18
9840
理解 javascript:void(0) 语句
你可能会遇到包含使用 href="javascript:void(0);" 的 <a> 元素。 当将表达式插入网页可能会导致不良副作用时,通常会使用 javascript void。
奋飛
2023/03/06
1.6K0
记一个JS中的小坑
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
Tom2Code
2022/04/15
9160
接口测试平台代码实现12:用户管理系统的后台代码-登录
上节,我们尝试制作了一个登陆页面前端,有的小伙伴反馈说有点跟不上前端开发这块,这是正常的,而且公众号又不是什么直播课程,是没有跟不跟的上之说,哪怕一周敲出来一节课的内容也无所谓。不过的确前端开发对我们测试来说一直是一块黑洞,很少有人掌握这里的技术,或者说我们做出来的东西有点丑,不过这正常,如果好看的话,基本都去做前端开发了。
我去热饭
2022/05/19
1.3K0
接口测试平台代码实现12:用户管理系统的后台代码-登录
如何让用户选择是否离开当前页面?
写在开头 为什么要写这个文章,因为每个礼拜都有人问我这个问题... 抄一个微信公众号的编辑器的类似功能场景来实现 为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器,不做判断,那么用户数据直接丢了 梳理需求 离开页面方式,被kk,a标签,关闭浏览器或者当前tab页等... 需要判断数据是否跟初始化时一致(用户有无填写表单...) 用户选择离开就要继续逻辑,反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或
Peter谭金杰
2020/06/09
2.3K0
如何让用户选择是否离开当前页面?
超链接标签
哈喽,亲爱的小伙伴们,好久没见啦,最近忙于项目的事情,所以并没有按时间发布新的文章,但是对于之前写的文章,我都有新的补充,尽量做到最全面和最易懂,那么这篇文章我就带大家了解一下什么是超链接标签。
守护最温柔的金木
2020/08/31
2.6K0
超链接标签
navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found
在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:
honey缘木鱼
2019/03/11
9480
navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found
a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思
javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击时就没有任何反应。这是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等 详细请看:HTML5新增的几个a标签属性 移动端。
德顺
2019/11/13
4.2K0
a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思
window.open打开页面会被浏览器拦截问题解决
普通情况下window.open不会拦截,但若是在ajax的回调里面进行window.open,会拦截!因为浏览器会认为这是一个骚扰用户的行为。 在网上找到一些解决方案,总结如下。其中只有方案1、方案2个人验证过有效。其他未知orz...
celineWong7
2020/11/05
10.5K0
html a标签跳转_点击a标签不进行跳转
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170170.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
3.6K0
点击超链接不跳转的方式[通俗易懂]
1、<a href=”####” ></a>或<a href=”#all”></a>
全栈程序员站长
2022/07/07
3.5K0
关于Firefox中链接点击弹出空白标签页的问题分析
昨天突然有好心人提醒我说我的网站某些链接在firefox中打开时会弹出 about:blank 的空白页面。本来自己在测试的时候没怎么考虑浏览器的兼容问题,毕竟自己总共也没写几个标签。不过研究了一下发现前端这一行做起来还真挺麻烦的。
mythsman
2022/11/14
1.7K0
HTML5学习(五):基础标签(一)
<ul><li>需要显示的条目内容</li></ul> <h1 align="center">世界最后的国家是哪些</h1> <ul> <li>中国 :<t>自强</t></li> <li>韩国 :<t>悲剧</t></li> <li>印度 :<t>神奇</t></li> <li>美国 :<t>屌丝</t></li> </ul>
孙寅
2020/06/02
8400
HTML5学习(五):基础标签(一)
6个打开链接地址的方式
今天分享 6 个链接地址打开的方式,比较基础的内容,但是可以拓展一下 js 的知识面。 1、window.location.href 这应该是最常用的方式了,可以将当前页面跳转到指定的链接,适合普通的页面跳转。
老K博客
2024/10/14
4750
html+css+JavaScript例题
这个例题主要是做一个表格,一个存储学生资料的表格,能够完成以下功能: 添加学生 删除学生 修改学生 分页查询学生 html代码: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>     </head>     <!--  引入样式文件  -->     <link rel="stylesheet" href="css/style_A.css" />     <!--  引入
端碗吹水
2020/09/23
1.7K0
html+css+JavaScript例题
web安全之XSS实例解析
跨站脚本攻击(Cross Site Script),本来缩写是 CSS, 但是为了和层叠样式表(Cascading Style Sheet, CSS)有所区分,所以安全领域叫做 “XSS”;
前端迷
2020/07/03
1.4K0
web安全之XSS实例解析
Html<a>标签href的困惑记载
近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框。Chrome和Android平台都没问题,测试阶段发现Ios平台出现了点问题~弹框闪现一下之后,页面被重新渲染了,自然弹框又被消隐掉了。),经历一番查证,个中缘由原来如此。 出现问题后,立马走了段代码逻辑,发现并没任何逻辑问题。并且Chrome和Android平台又都OK的,只是Ios平台有此问题。经验不够丰富情形之下,只能在Ios手机上先Al
晚晴幽草轩轩主
2018/03/27
3.4K0
HTML跳转到页面某一位置
设计网页时,有时需要跳转到页面某一位置,下面给出了两种跳转到页面某一位置的两种方法。
里克贝斯
2021/05/21
2K0
阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一个个解决中。其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页(窗口)的问题。 问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度
Jeff
2018/01/19
9.2K0
阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
Web标准中的常见问题
大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使得Web标准迅速受到重视并逐渐普及,网易、新浪等各大网站相继采用Web标准进行网站重构。
张子阳
2018/09/27
1.2K0
相关推荐
九、知识拓展
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档