使用 jQuery 在 iOS 上对单击/悬停行为感到困惑

Posted 2023-03-12

【中文标题】使用 jQuery 在 iOS 上对单击/悬停行为感到困惑

【英文标题】：Confusion with click/hover behavior on iOS with jQuery

【发布时间】：2013-08-02 10:08:23

【问题描述】：

我有一个带有 jQ​​uery 的网页。当我在 iPad / iPhone 中打开它时，为其设置悬停行为时，超链接无法正常工作。

我试图通过在互联网上浏览许多网站来解决这个问题，但找不到任何特定的解决方案。也许我无法理解发生了什么。我会很感激一些线索和解决方案。

这里是设置悬停的代码：

.box:hover .box_details .description2 
  height: auto !important;
  display: block


.box .social 
  width: 150px ;
  position: absolute;
  z-index: 99 ;
  margin: 0 auto;
  margin-left: 50%;
  left: -75px;
  text-align: center


.box:hover .social ul 
  margin-top: 10px;
  -webkit-transition: margin-top linear 0.5s ;
  transition: margin-top linear 0.5s ;


.box .social ul 
  width: 100% ;
  float: left ;
  margin-top: -50px ;


.box .social ul li 
  float: left;
  list-style: none;
  margin: 1% 1% 0 1%;
  line-height: 20px;
  width: 22%


.box .social ul li img 
  width: 100% !important;
  position: relative

请帮帮我。谢谢！

【问题讨论】：

你能告诉我们你的代码吗？还有……你怎么能把鼠标悬停在触摸屏设备上？无论您是否触摸它，都没有鼠标光标悬停在元素上...

ios 中的“悬停”是什么？

您可能会使用jQuery Mobile Events 做得更好，试试tap 或taphold。

.box:hover .box_details .description2 height:auto !important;显示：块 .box .social 宽度：150px ;位置：绝对； z-index:99 ;边距：0 自动；左边距：50%；左：-75px； text-align:center .box:hover .social ul margin-top:10px; -webkit-transition:margin-top 线性 0.5s ;过渡：margin-top 线性 0.5s ; .box .social ul 宽度：100% ;向左飘浮 ;边距顶部：-50px ; .box .social ul li float:left;列表样式：无；保证金：1% 1% 0 1%；行高：20px；宽度：22% .box .social ul li img 宽度：100% !important;位置：相对

我无法编辑 j 查询，因为它来自其他网站。

【参考方案1】：

如果你在谈论桌面和移动端的 jQuery 事件

$('.selector').on('mouseenter touchstart', function() 
     // Do something
);

$('.selector').on('mouseleave touchend', function()
     // Dhing someto
);

【讨论】：

这不等同于 .hover()。启用触摸的菜单需要一个 touchstart，然后是一个 touchend，这将使菜单保持打开状态。然后，当你再次点击时它需要关闭，这将产生另一个 touchstart 和 touchend。

【参考方案2】：

我认为您可以将悬停事件更改为触摸事件。

【讨论】：

如何将 iphone 和 ipad 的悬停更改为触摸事件

如果你使用jQuery，它会像：$(element).on('touchstart',function() //your code ).on('touchend',function() //your code)

@zqillyc - 不完全是。该方法仅在您的手指触摸时有效。

【参考方案3】：

在 iOS 中，所有悬停事件都被视为点击事件。因此，如果您在链接上有 :hover 样式，用户将不得不单击该链接两次。 这是一篇关于 iOS 的文章：hover/double tap issue。

【参考方案4】：

任何移动网站（用于 Iphone 或 Ipad 或任何设备）悬停效果是不必要的（由于触摸），它不会有效果。

最好只使用:active psuedoclass。