<strike id="eq0ii"></strike>

css不常見屬性之pointer-events

peixn 發布于2019-08-02 11:36 / 984人閱讀

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網友敘帝利給出了一種使用場景。加上則不會響應事件了。

MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。
pointer-events 屬性值有:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

其中默認屬性為 auto。當值為none表示鼠標事件“穿透”該元素并且指定該元素“下面”的任何東西。

使用場景

拋卻只適用于svg的值,說一說 none 的使用場景。 mdn上的解釋不太好理解。網友敘帝利給出了一種使用場景。
我這里還有一中使用場景是當用div元素通過css樣式模擬按鈕時，可以使用 pointer-event: none 模擬button禁止點擊。
比如:

// html

.point {
    width: 1.8rem;
    height: .44rem;
    margin: 0 auto;
    margin-top: 0.8rem;
    text-align: center;
    line-height: .44rem;
    border-radius: 22px;
    color: #fff;
    background-color: rgba(67,76,94,.43);
    pointer-events: none;
}

此時該div的樣子,如果不設置pointer-events: none; 只是樣子不可點擊，點擊還是會觸發事件響應的。加上則不會響應click事件了。

GPU云服務器云服務器 css屬性訪問CSS屬性 position屬性，css 獲取CSS屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52990.html

css不常見屬性之pointer-events

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網友敘帝利給出了一種使用場景。加上則不會響應事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...

AndroidTraveler 2019-08-30 15:54 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

Berwin 2019-08-01 17:42 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

MASAILA 2019-08-21 16:46 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

qqlcbb 2019-08-30 15:53 評論0 收藏0