分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

【01】a tag只为成button用时候设置href的办法

发布时间:2023-09-06 01:16责任编辑:郭大石关键词:暂无标签

a tag为成button使用,
把JavaScript动作处理时,有如下四种停止Event效果。

  • <a href="#">
  • <a href="javascript:;">
  • <a href="javascript:void(0)">
  • <a role="button" tabindex="0">

按照如下顺序可以考虑使用。

  1. 可以用button tag的话,直接用Button Tag。(推荐)
  2. 如果需要用a tag : <a href="javascript:;" role="button">
    • script load前点击a tag也不会跟href="#"一样滚动条到页面上单。
    • javascript:void(0); 效果一样,但更简单
    • role: 可达性
    • tab focusing 可能 (通过用 href)
  3. 如果需要删除href property: <a role="button" tabindex="0"> (cursor 图表的话用 css 控制)
    • 在a tag上没有 href 的话不能Tab focusing,
    • 但设置tabindex="0" 的话会 focusable 。 (Tab顺序的话,按照基本Markup顺序做)
    • 参考: 如果禁止Focus的话用 `tabindex="-1"

参考 #

<a href="#"> 缺点 #

  • 不对hash的原来目的 (anchor 是移动特点位置是用的)
  • 点击的话会滚动条到页面上单。 (列: script load 前,script error时)

如果用javascript 处理tag的话,推荐使用button tag #

  • 推荐使用HTML基本button <button>, <input type="button" /><input type="image" />。比使用button role property更好。
  • https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

a tag只为成button使用时设置href办法 #

href="javascript:;" or href="javascript:void(0);"

  • 两个都一样。 (停止a tag的默认效果)
  • 用JavaScript点击处理时使用
  • script load前点击也不会跟href="#"一样滚动跳到页面上单

void(0) ? #

  • https://stackoverflow.com/questions/7452341/what-does-void-0-mean

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/void
    void(0)undefined使用 (void是每次返回undefined)

  • 理由: undefined是会override的。 (虽ECMAScript 5 或 newer上没问题。。。)

alert(undefined); //alerts "undefined"var undefined = "new value";alert(undefined) // alerts "new value"
  • 为什么是0?: 很简单,很习用。
  • 很多minifiers把undefined换掉void 0 (用量小,安全)
  • 参考: 跟void 0一样的意思

<a role="button" tabindex="0"> 方式 #

http://wit.nts-corp.com/2014/04/14/1297 > "a tag"
https://stackoverflow.com/questions/10510191/valid-to-use-a-anchor-tag-without-href-attribute

需要使用 a tag + 删除href 的方式的话(没有目的地的话):

    1. 删除href property
    2. WAI-ARIA Spec上提供的role property里必要告诉是button
    3. 为了focusable设置tabindex="0"
      • Tab顺序的话,按照基本Markup顺序做
      • 没href property的话,不能Tab focus

【01】a tag只为成button用时候设置href的办法

原文地址:http://www.cnblogs.com/yeziTesting/p/7641422.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved