Javascript 禁用移动设备上悬停Div内的锚点，直到打开

我到处找，但找不到解决这个问题的办法

在桌面浏览器上，当用户将鼠标悬停在图像上时，会出现一个div，如果需要，可以单击div中的链接。但是，在移动设备上，鼠标悬停是由单击触发的。如果用户恰好在正确的位置单击，即使div还不可见，他们也可能意外地单击锚点并离开页面。（换句话说，在单击链接的同时，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>

斯塔夫皮克先生{
位置：相对位置；
宽度：33.33333%；
高度：自动；
}
.staffpic:悬停。弹出窗口{
显示：块；
}
.staffpic img{
显示：块；
宽度：110px；
高度：110px；
保证金：0自动；
}
.弹出窗口{
显示：无；
位置：绝对位置；
底部：0；
左：-5px；
宽度：100%；
身高：100%；
框大小：边框框；
填充：15px；
背景色：rgba（255,153,0,0.9）；
颜色：#fff；
文本转换：大写；
}
约翰·史密斯，导演

城市名称|

---

有什么想法吗？欢迎使用HTML、CSS、JS和jQuery解决方案！（可能比我能想到的使用

指针事件：none

和一些jQuery更聪明？

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

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

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

---

我找到了一个解决方案，但并不完美。我想张贴它的情况下，有人在未来有这个问题，只是需要一些将工作

我在带有真实链接的跨距中添加了一个假链接，然后为它设置了新的显示样式，并且基于父跨距的真实链接正在悬停

<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;
  }
  .staffpic a { 
      display: none; /* Added */
  }
  .staffpic.link:hover a {
      display: inline; /* Added */
  }
  .staffpic.link:hover .fakelink {
      display: none; /* Added */
  }
  .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 | <span class="link"><a href="mailto:johnsmith@example.com">Email John</a><span class="fakelink">Email John</span></span>
  </div>
</div>

斯塔夫皮克先生{
位置：相对位置；
宽度：33.33333%；
高度：自动；
}
.staffpic:悬停。弹出窗口{
显示：块；
}
.staffpic img{
显示：块；
宽度：110px；
高度：110px；
保证金：0自动；
}
斯塔夫皮克先生{
显示：无；/*已添加*/
}
链接：悬停a{
显示：内联；/*已添加*/
}
.staffpic.link:hover.fakelink{
显示：无；/*已添加*/
}
.弹出窗口{
显示：无；
位置：绝对位置；
底部：0；
左：-5px；
宽度：100%；
身高：100%；
框大小：边框框；
填充：15px；
背景色：rgba（255,153,0,0.9）；
颜色：#fff；
文本转换：大写；
}
约翰·史密斯，导演

CityName |电子邮件：John

---

如果有人有，我仍然希望有一个更干净的解决方案，没有所有这些添加的html。

不幸的是，这对我不起作用。当用户单击时，元素的显示不再是“none”，因此它不会被if语句捕获。也许它需要设置某种持续时间，这样在元素的样式改变后.2秒，链接就可以点击了（或者类似的东西）。我不知道该怎么做。