Question

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

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

在触摸屏设备上，触摸红色方块，警报应该触发，按钮甚至不显示。我在桌面Android模拟器和真正的Android 2.3手机上进行了测试。

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

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

Answer 1

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

Answer 2

我刚刚在我的真实设备上测试过它，它确实执行了按钮的动作。您可以尝试使红色框成为图像，并通过使用Javascript onclick将图像更改为按钮。如果我没有按时完成，我会为你提供一些代码。

Answer 3

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

Answer 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;
});

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

Answer 5

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

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

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");
});

display：none触摸屏设备上的悬停技巧

5 个答案: