css3 pointer events 介紹詳解

2022-09-21 10:51:13 字數 1026 閱讀 4879

pointer-events 是什麼?

顧名思義,pointer-events 是乙個用於 html 指標事件的屬性。

pointer-events 可以禁用 html 元素的 hover/focus/active 等動態效果。

預設值為 auto,語法:

複製**

**如下:

pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

我們常用的 auto | none 屬性,需要注意的是,其他的屬性只有 svg 元素適用。

auto:可以使用指標事件。

none:禁用指標事件,需要注意的是, 當禁用指標的的元素有子/父元素時,在時間冒泡/捕獲階段,事件將在其子/父元素觸發。

常用場景

1、禁用 a 標籤事件效果

在做 tab 切換的時候,當選中當前項,禁用當前標籤的事件,只有切換其他 tab 的時候,才重新請求新的資料。

&l程式設計客棧t;ul>

2、切換開/關按鈕狀態

點選提交按鈕的時候,為了防止使用者一直點選按鈕,傳送請求,當請求未返回結果之前,給按鈕增加 pointer-events: none,可以防止這種情況,這種情況在業務中也十分常見。

.j-pro

submit: function()

}.bind(this)

// ...

});}

3、防止透明元素和可點選元素重疊不能點選

一些內容的展示區域,為了實現一些好看的 css 效果,當元素上方有其他元素遮蓋,為了不影響下方元素的事件,給被遮蓋的元素增加 pointer-events: none; 可以解決。

.layewww.cppcns.comr

.j-pro

dzrirvdfjsponinter-events 相容性

本文標題: css3 pointer-events 介紹詳解

本文位址:

CSS3 CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到...

css3 css的3種引入方式

你好!這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章,了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...