【CSS】css控制鼠標點擊事件(pointer-events)

微信訂閱號:Rabbit_svip


pointer-events 是CSS3的一個屬性,支持的值非常多,其中大部分都是和SVG有關。對于前端日常開發而言,只要了解 none 這個值就已經夠我們玩一段時間了。

pointer-events: none;
意思就是讓鼠標事件失效(鏈接、點擊等事件)。




常用場合:獲取驗證碼


微信訂閱號:Rabbit_svip

給 <a> 標簽定義一個 id=”btn”,然后通過 JS 控制 <a> 標簽,點擊之后模擬發送驗證碼,并讓 <a> 標簽添加一個定義好的 disable 樣式。

最后設置2秒內不能再點擊發送二維碼請求。


微信訂閱號:Rabbit_svip

可以看到上圖效果。
第一次點擊“發送驗證碼”按鈕,控制臺上有輸出的,點擊之后,按鈕加了 pointer-events: none;,然后再按就沒效果了,同時鼠標在按鈕上也不會變成“一只手”。

除次之外,pointer-events: none; 還可以禁止 標簽的頁面跳轉。




注意點:

  1. pointer-events 的值為 none 時,如果元素上絕對定位,那在它下一層的元素可以被選中。
  2. pointer-events: none; 只是用來禁用鼠標的事件,通過其他方式綁定的事件還是會觸發的,比如鍵盤事件等。
  3. 如果將一個元素的子元素 pointer-events 設置成其他值(比如:auto),那么當點擊子元素時,還是會通過事件冒泡的形式出發父元素的事件。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,646評論 1 45
  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,530評論 1 11
  • 移動頁面點擊穿透問題解決方案 一.click與300ms延遲 移動瀏覽器提供一個特殊的功能:雙擊(double t...
    程序員之路閱讀 3,849評論 0 2
  • 1.幾種基本數據類型?復雜數據類型?值類型和引用數據類型?堆棧數據結構? 基本數據類型:Undefined、Nul...
    極樂君閱讀 5,574評論 0 106
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92