javascript - 在移动设备上禁用 Hover Div 内的 anchor ，直到打开

Question

我到处搜索，但找不到解决这个确切问题的方法。

在桌面浏览器上，当用户将鼠标悬停在图像上时，会出现一个 div，他们可以根据需要单击 div 中的链接。然而，在移动设备上，悬停是由点击触发的。如果用户在正确的位置单击，即使 div 尚不可见，他们也可能会意外单击 anchor 并离开页面。 (换句话说，在单击链接的同时，div 从 display:none 变为 display:block。)

我想防止意外点击发生在移动浏览器上，但我仍然希望链接在 div 可见后可用。

我的代码:

<style>
  .staffpic {
    position: relative;
    width: 33.33333%;
    height: auto;
  }
  .staffpic:hover .popup {
      display: block;
  }
  .staffpic img {
      display: block;
      width: 110px;
      height: 110px;
      margin: 0 auto;
  }
  .popup {
      display:none;
      position: absolute;
      bottom: 0;
      left: -5px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 15px;
      background-color: rgba(255, 153, 0, 0.9);
      color: #fff;
      text-transform: uppercase;
  }
</style>

<div class="staffpic">
  <img src="/wp-content/uploads/image.jpg" />
  <div class="popup">
    John Smith, Director<br/>
    CityName | <a href="mailto:johnsmith@example.com">Email John</a>
  </div>
</div>

有什么想法吗？欢迎使用 HTML、CSS、JS 和 jQuery 解决方案! (也许比我能想到的使用 pointer-events:none 和一些 jQuery 更聪明？)

Answer 1

我实际上即将在元素中遇到同样的问题，并记下了一个可能的解决方案。还没有测试过，但它可能会帮助你。仅当元素的显示不是“无”时才应触发该链接:

var popup = $('.popup'),
    display = popup.css('display');

if (!(display === 'none')) {
  popup.on('click', function(e) {
    e.preventDefault();
  });
}