移除行動裝置上的 hover 事件

最近在使用 Bootstrap 的 Checkbox button

在桌機上取消選擇後顯示正常

但是在行動裝置上取消後仍會顯示 CSS 的 hover 和 focus 樣式focus 很簡單移除,只要 setTimeout removeClass 就好了

hover 就比較麻煩

測試後發現

在行動裝置上點擊後會依序觸發以下事件

  1. touchstart
  2. touchend
  3. mouseenter
  4. mouseover
  5. mousedown
  6. mouseup
  7. click

根據以上所知,只要在 touchend 觸發 click 事件

其他通通跳過就沒問題了

所以可以監聽 touchend

然後使用 preventDefault() 將之後的事件全部停止

再直接 trigger click 即可

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料