Don't在触摸设备上显示悬停状态

Don't show hover state on touch devices

本文关键字：显示 悬停 状态 触摸 Don      更新时间：2023-09-26

这可能吗？除了将我所有的悬停样式转换为mouseover监听器之外，是否可以阻止触摸设备触发CSS悬停状态？

我有一个应用程序必须同时处理触摸和指针输入，它工作得很好，但悬停上应用的某些样式在触摸设备上没有意义，因为它们往往在用户点击对象后无限期地保持悬停状态。

需要考虑的事项：

  • 对我来说，设备宽度与支持触摸的设备无关，我们在这里使用的触摸屏是台式显示器。

  • 我不想强迫用户在多输入上通过触摸进行输入装置

我按照上面评论中链接中分享的方法解决了这个问题。如果您没有使用它，请考虑在这种情况下使用Modernizr。也想听听其他方法。。。

Blender提到，作为用户，你可以检查触摸事件，比如：

html.touch {
  /* Touch Device ~ No Hovers */
}
html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}

我的解决方案是将悬停活动css类添加到HTML标记中，并在所有CSS选择器的开头使用：hover并在第一次触摸启动事件上删除该类。

http://codepen.io/Bnaya/pen/EoJlb

JS:

(function () {
    'use strict';
    if (!('addEventListener' in window)) {
        return;
    }
    var htmlElement = document.querySelector('html');
    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');
        htmlElement.removeEventListener('touchstart', touchStart);
    }
    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS：

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}
相关文章：