【01】a tag只為成button用時候設置href的辦法
阿新 • • 發佈:2017-10-09
http developer java 什麽是 控制 ring eve define 順序
a tag為成button使用,
把JavaScript動作處理時,有如下四種停止Event效果。
<a href="#">
<a href="javascript:;">
<a href="javascript:void(0)">
<a role="button" tabindex="0">
按照如下順序可以考慮使用。
- 可以用button tag的話,直接用Button Tag。(推薦)
- 如果需要用a tag :
<a href="javascript:;" role="button">
- script load前點擊a tag也不會跟href="#"一樣滾動條到頁面上單。
- 跟
javascript:void(0);
效果一樣,但更簡單 - role: 可達性
- tab focusing 可能 (通過用 href)
- 如果需要刪除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 的方式的話(沒有目的地的話):
- 刪除href property
- WAI-ARIA Spec上提供的role property裏必要告訴是button
- 為了focusable設置
tabindex="0"
- Tab順序的話,按照基本Markup順序做
- 沒href property的話,不能Tab focus
【01】a tag只為成button用時候設置href的辦法