實現a標籤按鈕完全禁用

2022-06-06 23:48:12 字數 654 閱讀 2304

最近在開發時遇見乙個問題

我們知道a標籤的disabled屬性部分瀏覽器支援,但是儘管設定了disabled屬性也無法阻擋任何滑鼠經過或是點選事件的,那麼如何實現a標籤按鈕的禁用呢?

轉換一下思維,設定disabled屬性的元素表現為不能點選、無法獲得游標焦點,那麼我們不用disabled屬性實際上也可以達到同樣的效果!

我們可以直接使用jquery:unbind()或者js:removeeventlistener()移除點選事件

pointer-events:none是css3中的屬性,表示禁用滑鼠事件,這樣實際上也是將click事件去掉了!

我們可以使用jquery:removerattr()或者js:removeattribute()移除a標籤的href屬性

注意不能將href屬性賦值為空,因為空的a標籤會跳轉到本頁

我們在設定了pointer-events:none後發現元素仍然會被focus到,那麼如何解決這個問題呢?

給a標籤設定disabled屬性雖然不能禁用滑鼠事件,但是可以禁用鍵盤事件!!!

無href + pointer-events:none + disabled = 完美禁用

進一步整理 

pointer-events:none & without href = 完美禁用

倒計時,js禁用 a 標籤按鈕10秒

方式一 禁用10秒,10秒鐘後可用 按鈕禁用10秒 function disabledsubmitbutton submitbuttonname 控制按鈕為禁用 var timeoutobj settimeout function 10000 方式二 禁用10秒,10秒鐘後可用,且有倒計時提示 按鈕...

頁面按鈕禁用與解除禁用

計時器和延時器的概念 計時器 計時器id號 setinterval 函式,毫秒數 每隔指定毫秒數,呼叫一次 函式 clearinterval 計時器id號 停止指定id號的計時器 實際上是銷毀釋放資源了 延時器 延時器id號 settimeout 函式,毫秒間隔 從呼叫開始,等待指定毫秒數後呼叫一次...

頁面按鈕禁用與解除禁用的方法

計時器和延時器的概念 計時器 計時器id號 setinterval 函式,毫秒數 每隔指定毫秒數,呼叫一次 函式 clearinterval 計時器id號 停止指定id號的計時器 實際上是銷毀釋放資源了 延時器 延時器id號 settimeout 函式,毫秒間隔 從呼叫開始,等待指定毫秒數後呼叫一次...