如何防止 :focus/:active 上显示的链接自动点击触摸屏？答案

【问题标题】：How to prevent links displayed on :focus/:active from auto-clicking on a touch screen?如何防止 :focus/:active 上显示的链接自动点击触摸屏？
【发布时间】：2017-01-27 19:02:32
【问题描述】：

我正在设计一个侧边栏，它会隐藏菜单条目，除非用户将鼠标悬停在它上面/或在移动设备上点击它。问题出现在移动设备上（或者当我在开发人员选项中切换移动模式的 chrome 中测试我的代码时）。在触摸模式下，如果我点击侧边栏，焦点后将显示菜单条目，则会自动单击新可见的菜单条目。有没有办法禁用自动点击新在指针下可见的链接？

我首选的解决方案是纯 CSS - 但如果没有其他选择，我可以使用 vanilla JS。

这是我的小提琴：https://jsfiddle.net/n7nsdL49/

HTML：

<div class="sidebar">
    <div class="menu">
        <ul class="menu">
            <li><a href="http://www.google.com" target="_blank">This</a></li>
            <li><a href="http://www.google.com" target="_blank">is</a></li>
            <li><a href="http://www.google.com" target="_blank">a</a></li>
            <li><a href="http://www.google.com" target="_blank">menu.</a></li>
        </ul>
    </div>
</div>

CSS：

.sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  background-color : green;
}
.menu {
  display: none
}
.sidebar:hover, .sidebar:focus {
  width: 20%;
  background-color: red;
}
.sidebar:hover .menu, .sidebar:focus .menu {
  display: block;
}

编辑：我尝试过使用pointer-events 选项，但它似乎对显示时自动点击的链接没有影响。

【问题讨论】：

要么不要在不可点击的项目上使用:hover 和:focus（如<div>、<li> 等），要么使用modernizr 之类的东西并使用.no-touch .sidebar :hover 等。

标签： html css responsive-design focus mobile-website

【解决方案1】：

我的建议是避免使用显示器，而是使用以下命令将其隐藏在左侧：

.sidebar {
  position: fixed;
  height: 100%;
  width: 40%;
  background-color : green;
  left:-20%;
}

.sidebar:hover, .sidebar:focus {
  background-color: red;
  left:0;
}

这是一个小提琴：https://jsfiddle.net/n7nsdL49/2/

你甚至可以添加一个过渡

.sidebar {
  position: fixed;
  height: 100%;
  width: 40%;
  background-color : green;
  left:-20%;
  transition: left 0.2s ease-in;
}

【讨论】：

这在移动设备上遇到了同样的问题。当我在稍后将出现菜单列表的位置点击侧边栏时，菜单出现，并且我的指针下方的链接被点击。

【解决方案2】：

通过使用animation 属性，我能够绕过自动点击新可见链接的问题。本质上，我将menu 类设置为在获得focus 或hover 后一小段时间可见。这样，如果新显示的链接位于指针事件下方，则不会注册点击。这是fiddle: https://jsfiddle.net/nu9vr1sm/。

HTML：

<div class="sidebar">
    <div class="menu">
        <ul class="menu">
            <li><a href="http://www.google.com" target="_blank">This</a></li>
            <li><a href="http://www.google.com" target="_blank">is</a></li>
            <li><a href="http://www.google.com" target="_blank">a</a></li>
            <li><a href="http://www.google.com" target="_blank">menu.</a></li>
        </ul>
    </div>
</div>

CSS：

.sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  background-color : green;
}
.menu {
  display: none;
  visibility: hidden;    /* <= include this property */
}
.sidebar:hover, .sidebar:focus {
  width: 20%;
  background-color: red;
}

/* ================== */
/* THE IMPORTANT PART */
/* ================== */
.sidebar:hover .menu,
.sidebar:focus .menu {
        display: block;                /* make it part of the DOM */
        animation: fadeIn 0.05s;       /* make it visible after a while */
        animation-fill-mode: forwards; /* make it retain final visibility */
    }

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
/* ================== */

【讨论】：