首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用href ='javascript:func()'比onclick ='func()'用于锚点是不好的做法?

使用href ='javascript:func()'比onclick ='func()'用于锚点是不好的做法。这种做法被称为"伪协议",它通过在href属性中使用JavaScript代码来触发事件。虽然这种方法在某些情况下可以实现相同的效果,但它存在一些问题:

  1. 可访问性问题:使用伪协议会导致页面无法被屏幕阅读器等辅助技术正确解析和处理,从而影响到残障用户的访问体验。
  2. SEO问题:搜索引擎爬虫无法正确解析伪协议,因此无法正确索引和收录页面中的链接,从而影响网站的搜索引擎优化。
  3. 可维护性问题:使用伪协议会使代码难以维护和理解,特别是在复杂的页面中,难以追踪和调试。

相比之下,使用onclick ='func()'是更好的做法。它将事件处理程序直接绑定到元素的onclick属性上,可以实现相同的效果,同时避免了上述问题。使用onclick可以更好地支持可访问性,使搜索引擎能够正确解析和处理链接,同时也更易于维护和调试。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于JS实现回到页面顶部五种写法(从实现到增强)

写法 【1】   使用链接一种简单返回顶部功能实现。...该实现主要在页面顶部放置一个指定名称链接,然后在页面下方放置一个返回到该链接,用户点击该链接即可返回到该所在顶部位置   [注意]关于详细信息移步至此 <body style="...如果没有提供该参数,默认为true   <em>使用</em>该方法<em>的</em>原理与<em>使用</em><em>锚</em><em>点</em><em>的</em>原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...  动画有两种:一种<em>是</em>CSS动画,需要有样式变化配合transition;一种<em>是</em><em>javascript</em>动画,<em>使用</em>定时器来实现     在上面的5种实现中,scrollTop、scrollTo()和scrollBy...()方法可以增加动画,且由于无样式变化,只能增加<em>javascript</em>动画   定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以<em>使用</em>,下面<em>使用</em>性能最好<em>的</em>定时器

4.9K21

新手如何在 ES6 如何操作HTML DOM元素?

支持 JavaScript 浏览器能够在 HTML 页面在浏览器中呈现之后识别该页面中各个对象,因为支持 JavaScript 浏览器可以识别并使用 DOM。因此,允许随意控制对象功能。...表单: DOM 层次结构继续向下包含表单各个元素 DOM 类别: JavaScript 支持三种 DOM 类型,但我们仅讨论适用于 ES6 类型。...**Legacy DOM:**这是早期版本 JavaScript 使用模型。该模型提供只读属性,例如标题、URL 等。它还提供有关整个文档 LastModified 信息。...document.alinkColor anchors[]: 它是每个对象数组,一个对应于文档中出现每个。...func1()"> Title <button name="b2" id="2" value="INFO" onclick="func2()"> URL

24920

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

首先, 标签 + onclick='{jscode}' 很常用一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 标签解释和处理不同...其次,使用 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 是因为使用者没有理解...说白了"###" 就是一个不是字符串 浏览器找不到也不会跳到页首,原理就是依赖了网页报错机制,找不到就不做处理。      有些人说,不喜欢“###”因为他会改变链接。...都是使用一直用javascript:void(0)或者javascript:。...2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全办法还是使用“####”。

1.6K120

编写兼容性JS代码

前文介绍了:  1 DOM四个常用方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意几个地方,另外为了减小html与javascript耦合使用java进行onclick...其实javascript不是一门简单语言,但是由于入门简单,很多人使用时候,都是直接复制粘贴,导致网页中充斥着大量冗余代码。   ...但是在编写合格javascript代码时,需要注意:   1 平稳退化:保证在不支持js或者低版本浏览器也能正常访问   2 分离javascript:把html与javascript分离,有助于后期代码维护...  3 向后兼容性:确定老版本浏览器不会因为脚本禁止而死掉   4 性能考虑:确定脚本执行最优   编写优化代码   针对前一篇中相册代码,这里主要修改地方onclick方法删除,在页面加载时...以前onclick标签处,这样: <a href="images/pig.png" title="I'm

3.2K90

Angular vs React vs Vue vs UISYS 事件绑定方式对比(新手必看)

我们先来看下原生html + JavaScript 如何做:原生方式: Greet ...function greet(){ alert("html and javascript"); } 这是一个非常简单例子,但是这个例子个网页,因此不能封装,也不能模块化...没有模块化网页,早期 w3c 出了webcomponent标准,但是后期废除了。 于是民间出了 三大框架,分别是 Angular、React、Vue。...React 事件绑定 React 还算是比较接近原生,如果js能力比较强,有种使用ThinkPad感觉(有小红帽,不用鼠标)。...OK ,学前端其实挺挑战,学好一个创造体验,学不好就会变为打印机(做界面都一样,就会按着设计垒插件)。希望大家都成为伟大 Full Stack Developer ,谢谢您观看。

1.5K40

使用原生 JavaScript 在页面加载完成后处理多个函数

网页中 JavaScript 脚本运行需要通过事件去触发。一般做法就是在网页中,直接编写几个函数,有的在代码被加载时候就被浏览器处理,或者使用类似下面的代码来触发实现函数相关功能。... 上面代码意思就是,当鼠标点击 id 为 link 元素时候,就触发了它 onclick 事件,然后执行使用 JavaScript...这样做法肯定是很不合理,因为触发操作直接写进了 HTML 结构里面,内容和行为没有隔离开,对日后二次开发或者修改带来不便。...JavaScript 正确使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。...前面说过 window.onload 事件加载缺陷只能在页面中使用一次。而使用监听器方法,就可以监听为 window onload 事件分别加载多个函数了。

2.7K20

前端一面react面试题(持续更新中)_2023-02-27

何为 JSX JSX JavaScript 语法一种语法扩展,并拥有 JavaScript 全部功能。...(2)不同点 使用场景: useEffect 在 React 渲染过程中被异步调用用于绝大多数场景;而 useLayoutEffect 会在所有的 DOM 变更之后同步调用,主要用于处理 DOM...做了3件事情: 有onclick那就执行onclick click时候阻止a标签默认事件 根据跳转href(即是to),用history (web前端路由两种方式之一,history &...hash)跳转,此时只是链接变了,并没有刷新页面而标签就是普通超链接了,用于从当前页面跳转到href指向另一 个页面(非情况)。...= this.href }) }) Redux 请求中间件如何处理并发 使用redux-Saga redux-saga一个管理redux应用异步操作中间件,用于代替 redux-thunk

1.6K20
领券