javascript實現的提示浮層跟隨鼠標移動

些網站要實現一些彈層效果，經常會有鼠標跟著移動彈層也隨之移動的特效，下面來說說這種效果的實現方法!

實現的效果：

下面來看看代碼：

html:

css:

js:

門的HTML - tabindex 的作用

HTML 的 tabindex 屬性開發過程中一般不會使用到，最近開發中有個需求兼顧富交互，便總結了一下。本篇文章同時收錄在我的【前端知識點】中，Github鏈接請點擊閱讀原文直達，歡迎 Star

兼容性：Safari不支持！

閱讀本文您將收獲

tabindex的作用
tabindex的使用
如何利用 tabindex 創造更好的用戶體驗

前言

在我們日常使用網頁的過程中，可以通過鍵盤控制一些元素的聚焦，從而達到便捷訪問的目的

element 分為 focusable 和非focusable ,如果使用了tabindex就可以改變相關的行為

在HTML中有6個元素默認支持聚焦：

帶 href 屬性的 <a> 標簽
帶 href 屬性的 <link> 標簽
<button></button> 標簽
<input /> 標簽 (排除帶有 type="hidden" 屬性的)
<select></select> 標簽
<textarea></textarea> 標簽

以上的元素默認都可以使用 Tab 鍵，以及 JS focus() 方法聚焦

document.querySelector("a").focus();

使用 tab鍵進行聚焦元素時，聚焦的順序等于元素在代碼中的出現先后順序，當我們進行富交互優化時，就需要用到 tabindex 這個屬性來幫助我們進行更好用戶體驗的優化了

tabindex的作用

①元素是否能聚焦：通過鍵盤這類輸入設備，或者通過 JS focus() 方法

②元素什么時候能聚焦：在用戶通過鍵盤與頁面交互時

通俗來說：就是當用戶使用鍵盤時，tabindex用來定位html元素,即使用tab鍵時焦點的順序。

tabindex的范圍

tabindex理論上可以使用在幾乎所有元素上

tabindex 理論上可以用在幾乎所有元素上，不管這個元素默認是否支持聚焦

tabindex 有三個值：0，-N(通常是-1)，N(正值)

tabindex=0，該元素可以用tab鍵獲取焦點

且訪問的順序是按照元素在文檔中的順序來focus，即使采用了浮動改變了頁面中顯示的順序，依然是按照html文檔中的順序來定位

tabindex<=-1，該元素用tab鍵獲取不到焦點，但是可以通過js獲取

這樣就便于我們通過js設置上下左右鍵的響應事件來focus
取值 -1~-999 之間沒有區別，但為了可讀性和一致性考慮，推薦使用 -1

tabindex>=1，該元素可以用tab鍵獲取焦點，而且優先級大于tabindex=0

不過在tabindex>=1時，數字越小，越先定位到；
如果多個元素擁有相同的 tabindex ，他們的相對順序按照他們在當前DOM中的先后順序決定

tabindex的使用

tabindex 決定聚焦順序

可聚焦元素中，正整數數值越大，順序越往后，正整數數值的節點順序比0值的節點靠前
代碼：

// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>

效果：

可聚焦元素中，相同 tabindex 數值的節點，根據 DOM節點先后順序決定聚焦順序
代碼：

// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>

效果：

tabindex 決定是否聚焦

節點的 tabindex 設置為 -1 時，當前節點使用 tab鍵不能聚焦
代碼：

// HTML
<button type="button">未設置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>

效果：

tabindex 與JS編程聚焦

通過 tabindex 結合JS可以讓默認不支持聚焦的節點進行聚焦,tabindex 為不超出范圍的任何整數值都可以
代碼：

// HTML
<button type="button" @click="clickBtn()">點擊讓DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">這是一個div</div>

// JS
clickBtn: function() {
    document.getElementById('FocusDiv').focus();
}

效果：

如何利用 tabindex 創造更好的用戶體驗

針對自定義標簽進行富交互優化

我們在創建一個自定義的標簽時，如果默認行為中不包含聚焦事件，我們可以使用 tabindex 為它增加聚焦功能，從而可以像很多可聚焦節點一樣進行順次焦點聚焦了

針對特定節點禁止聚焦操作

某些浮層及上層節點，如 toast組件、模態框、側邊彈出信息等，我們不希望節點被用戶聚焦捕獲，可以將節點的 tabindex 設置為 -1，就能避免這一問題

復雜列表控制聚焦順序

一些復雜的樹形結構或者列式結構，如果需要用戶操作順序按照我們預想的書序進行聚焦，可以利用tabindex 值的大小來進行處理。

現效果：

實現代碼：

在線咨詢

上一篇：HTML 音頻(Audio)
下一篇：HTML代碼中的空格和空行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商