a標籤如何禁止href跳轉或鏈結?

2022-09-14 09:03:10 字數 1882 閱讀 2243

在做頁面時,如果想做乙個鏈結點選後不做任何事情,或者響應點選而完成其他事情,可以設定其屬性 href = "#",但是,這樣會有乙個問題,就是當頁面有滾動條時,點選後會返回到頁面頂端,使用者體驗不好。

阻止預設事件的發生有兩個方法:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

head

>

<

body

>

<

a href

=""a><

br>

<

a href

=""onclick

="return false"

a><

br>

<

a href

=""id="go"

a>

<

script

>

//獲取元素節點

let go

=document.queryselector(

"#go")

//點選事件

go.onclick

=function

(e)

script

>

body

>

html

>

通過阻止a標籤預設事件就可以禁止a標籤跳轉!

void是j**ascipt自身的操作符,它表示的是只執行表示式,但沒有返回值!

<

a href

="j**ascript:void(0)"

>點選無法跳轉(j**ascript:void(0))

a>

<

a href

="j**ascript:void(null)"

>點選無法跳轉(j**ascript:void(null))

a>

這兩種寫法都可以,都表示乙個死鏈結,點選無效果

j**ascript:; 執行一段空白的j**ascript語句,返回空或者false值,從而防止鏈結跳轉

j**ascript:; 寫法比 j**ascript:void(0) 好,後者存在瀏覽器相容bug

<

a href

="j**ascript:;"

>點選無法跳轉(j**ascript:;)

a>

使用2個到4個#,見的大多是"####",也有使用"#all"等其他的。乙個無意義的標籤指定,不做任何處理。

(這種方法會在瀏覽器位址列上出現「####」)

<

a href

="####"

>點選無法跳轉

a>

注意:只是用乙個「#」是不行的,會預設重新整理頁面回到頁面頂部

總結:

<

script

>

let go

=document.queryselector(

"#go")

go.onclick

=function

(e)

script

>

a標籤href不跳轉 HTML常用標籤

這是乙個a標籤屬性 href的幾種取值 1.這是乙個a標籤 這種會自動判斷使用http還是https協議 2.路徑 使用絕對路徑 根目錄是指html檔案所在的目錄 使用相對路徑 相對於html檔案所在的目錄 3.偽協議 乙個什麼都不做的a鏈結 點了不會重新整理頁面,也不會回到頁面頂部,是乙個什麼都不...

標籤的href屬性

標籤的 href 屬性用於指定超連結目標的 url。value 值 描述url href的作用 返回頁尾 返回頂部 例 定位到first相關處 定位到second相關處 定位到second相關處 定位到second相關處 定位到second相關處 href和src區別 href 表示超文字引用 hy...

關於a標籤的href屬性

a標籤的href屬性值為 與 j ascript void 0 有啥區別,想來也沒啥可說,就簡單說兩句 a標籤的href屬性,優點有 天然滑鼠手型,以及可以被鍵盤focus以及focus時候回車模擬點選行為 支援回車點選和預設可以獲取焦點 一般來說,使用a標籤都是在href裡放url的,當然,除了u...