1

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

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

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

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

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

4

5 回答 5

1

pointer-events: none;一起试试display: none;

于 2013-03-11T18:34:13.683 回答
0

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

于 2013-03-11T18:33:45.497 回答
0

这是我想出的解决方案... 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;
});

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

于 2013-03-13T17:38:27.290 回答
0

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

于 2013-03-11T18:32:36.040 回答
0

我为你写了一个 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");
});
于 2018-10-15T15:08:18.383 回答