微信訂閱號: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;
還可以禁止 標簽的頁面跳轉。
注意點:
- pointer-events 的值為 none 時,如果元素上絕對定位,那在它下一層的元素可以被選中。
- pointer-events: none; 只是用來禁用鼠標的事件,通過其他方式綁定的事件還是會觸發的,比如鍵盤事件等。
- 如果將一個元素的子元素 pointer-events 設置成其他值(比如:auto),那么當點擊子元素時,還是會通過事件冒泡的形式出發父元素的事件。