jquery - 悬停事件，但不在触摸/移动设备上

Question

我正在尝试创建一个显示图像的悬停事件。在我的台式机/笔记本电脑上它可以正确触发。然而，在移动设备(触摸)上，图像仅在单击模式链接时出现，然后它是粘性的(它保留在屏幕上)。

在移动设备或触摸屏上，我不希望触发悬停事件。

这就是我正在处理的内容。

Jsfiddle

HTML

<a href="#test" id="test-parent">Hover to show image</a>

<img class="preview" id="test-child" src="https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg" />

<script>
  $("#test-parent").hover(function() {
    $("#test-child").fadeToggle();
  });
</script>

CSS

.preview {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  height: 50%;
}

Answer 1

您可以检查是否是触摸事件并相应地触发悬停效果。

<script>
  $("#test-parent").hover(function() {
   if(!isTouchEvent()){
    $("#test-child").fadeToggle();
   }
  });

  function isTouchEvent() {
    return 'ontouchstart' in document.documentElement
           || navigator.maxTouchPoints > 0
           || navigator.msMaxTouchPoints > 0;
  }

</script>

<强> JSFiddle Demo