javascript - 使鼠标悬停时的 img src 更改适应触摸屏设备

Question

我正在使用 mouseover/mouseout和 data-src/data-hover对于更改 <img> 的图形链接src悬停。

如何使代码适应触摸友好？是否有更清晰/更简单的方法来实现相同的功能？我已经试过了 vmouseover使用 jQuery Mobile，但没有用。

我没有使用 CSS :hover ，因为它是必须在鼠标悬停时改变颜色的特定图形，所以我不能将其用作起点。

每个链接的 HTML 设置:

<a href="/books">
  <img id="book" class="image image-3" data-hover="/assets/graphics/ro-book@2x.png" data-src="/assets/graphics/book@2x.png">
</a>

脚本:

$(".image-3").mouseover(function() {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function() {
  $(this).attr('src', $(this).data("src"));
});

Answer 1

不要忘记您应该为移动设备使用触摸事件而不是鼠标事件。

我建议使用 touchstart 事件。

$(".image-3").touchstart(function() {
  $(this).attr('src', $(this).data("hover"));
}).touchend(function() {
  $(this).attr('src', $(this).data("src"));
});