禁止滑鼠點選事件

三千煩惱絲發表於2017-05-17

javascript用來取消事件的預設動作。比如取消開啟連結,選擇文字或拖放等 當前元素的瀏覽器預設行為,但並不阻止事件被父級及document響應。

event.preventDefault()  

注意,如果 Event 物件的 cancelable 屬性是 fasle,那麼就沒有預設動作,或者不能阻止預設動作。呼叫該方法沒有作用。徹底取消瀏覽器事件,阻止事件被父級及document響應

event.stopPropagation()  

兩種方法都可以在事件傳播的任何階段都可以呼叫 純css實現禁止滑鼠點選事件 pointer-events ,他可以 1 阻止使用者的點選動作產生任何效果

2 阻止預設滑鼠指標的顯示

3 阻止CSS裡的hover和active狀態的變化觸發事件

4 阻止JavaScript點選動作觸發的事件

舉個例子

<button class="disabled">
    <style scoped>
       .disabled {
          pointer-events: none;
          cursor: default;
         opacity: 0.6;
        }
    </style>
 button</button>

禁止按鈕點選 ,ie9不支援,scoped火狐瀏覽器支援。

相關文章