显示：在触摸屏设备上没有悬停技巧答案

【问题标题】：display:none hover trick on a touchscreen device显示：在触摸屏设备上没有悬停技巧
【发布时间】：2018-10-15 23:08:18
【问题描述】：

我正在使用 CSS 悬停技巧来清理我的界面。仅当光标悬停在元素内时才会显示控件。在触摸屏设备上使用界面时遇到问题。如果控制按钮未显示display:none 并且我触摸了它应该在的位置，则该按钮仍会触发该事件。

在你的浏览器和触摸屏设备上试试这个小提琴，看看我的意思...... http://jsfiddle.net/6PvCn/2/

在触摸屏设备上，触摸红色方块会触发警报，但按钮甚至不会出现。我在桌面 Android 模拟器和我真正的 Android 2.3 手机上测试了这个。

我想要的效果是按钮首先显示而不触发，即使用户触摸了按钮“所在”的位置。

在使用 javascript 之前，我宁愿使用纯 CSS 解决方案。

【问题讨论】：

标签： css user-interface touch

【解决方案1】：

试试pointer-events: none; 和display: none;

【讨论】：

我读过 IE 不支持这个。 IE 对我来说不是什么大问题，因为 IE 上的人无论如何都应该在桌面上。但是在 Windows 手机上的支持情况如何？

【解决方案2】：

我刚刚在我的真实设备上对其进行了测试，它确实执行了按钮的操作。您可以尝试将红色框设为图像，并通过使用 Javascript 的 onclick 将图像更改为按钮。如果我时间不短，我会为您提供一些代码。

【讨论】：

【解决方案3】：

你不能用纯 CSS 做到这一点，点击按钮会使按钮进入悬停状态并触发点击事件。相反，您应该在激活时关闭按钮。

【讨论】：

那太糟糕了。 IMO 这是一个应该由 CSS 处理的用例。
一个变通方法，取出JS onclick，将按钮包裹在anchor中，悬停状态显示它，使用href触发动作。

【解决方案4】：

这是我想出的解决方案...http://jsfiddle.net/6PvCn/7/

在 Android 触摸屏上（不了解 IOS），如果隐藏元素未显示，则不会触发 hover 事件。所以基本上我检查元素是否是hovered，然后是clicked。

简而言之

$(".hidden").hover(function(e) {
  if(e.type == "mouseenter") $(this).addClass("hovering");
  else                       $(this).removeClass("hovering");
}).click(function(e) {
    if(!$(this).hasClass("hovering") return false;
});

小提琴解释了我在使用表单元素和动态添加内容时遇到的更复杂的情况。它提供了一个通用的解决方案，而不是这个元素特定的解决方案。

【讨论】：

我不是特别喜欢这个解决方案，所以如果有人有更好的想法，让我们听听！

【解决方案5】：

我为你写了一个 JS 解决方案： https://codepen.io/anon/pen/bmYROr

诀窍是防止按钮的点击事件在第一次点击外部 div 时被触发，因为在触摸设备上点击事件具有悬停效果。

let isTouchDevice = true;
let isHovered = false;

document.getElementById('outer').addEventListener('click', (e) => {
    if (isTouchDevice) {
        if (!isHovered) {
            e.stopPropagation();
        }
        isHovered = true;
    }
}, true);

document.getElementById('outer').addEventListener('mouseleave', (e) => {
    if (isTouchDevice) {
        isHovered = false;
    }
}, true);

document.getElementById('btn').addEventListener('click', () => {
    alert("hi");
});

【讨论】：