it-swarm.dev

是否有可能强制忽略:hover伪类用于iPhone/iPad用户?

我的网站上有一些css菜单,用:hover扩展(没有js)

这在iDevices上以半破解的方式工作,例如tap将激活:hover规则并展开菜单,但是在其他地方点击不会删除:hover。此外,如果元素内部有:hover'ed链接,则必须点击两次才能激活链接(首先点击触发:hover,第二次点击触发链接)。

通过绑定touchstart事件,我已经能够在iphone上很好地工作了。

问题是有时移动safari仍然选择从css触发:hover规则 代替 我的touchstart事件!

我知道这是问题所在,因为当我在css中手动禁用所有:hover规则时,移动safari工作得很好(但是常规浏览器显然不再这样)。

有没有办法在用户进行移动游览时动态“取消”某些元素的:hover规则?

在这里查看和比较iOS行为: http://jsfiddle.net/74s35/3/ 注意:只有一些css属性会触发双击行为,例如:显示:无;但不是背景:红色;或文字装饰:下划线;

91
Christopher Camps

我发现“:hover”在iPhone/iPad Safari中无法预测。有时点击元素使该元素“:悬停”,而有时它会漂移到其他元素。

目前,我只是在身体上有一个“无接触”课程。

<body class="yui3-skin-sam no-touch">
   ...
</body>

并将所有CSS规则与“:hover”置于“.no-touch”下方:

.no-touch my:hover{
   color: red;
}

在页面的某个地方,我有javascript删除 无触摸 类从正文。

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

这看起来并不完美,但无论如何都可行。

74
Morgan Cheng

:hover不是这里的问题。适用于iOS的Safari遵循一个非常奇怪的规则。它首先触发mouseovermousemove;如果在这些事件期间发生任何变化,“点击”和相关事件不会被触发:

Diagram of touch event in iOS 

mouseentermouseleave似乎包含在内,但它们未在图表中指定。

如果您因这些事件而修改任何内容,则不会触发单击事件。这包括DOM树中更高的东西。例如,这将阻止单击点击使用jQuery在您的网站上运行:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

编辑:为了澄清,jQuery的hover事件包括mouseentermouseleave。如果内容发生变化,这些都会阻止click

42
Zenexer

浏览器功能检测库 Modernizer 包括检查触摸事件。

它的默认行为是为您检测到的每个要素的html元素应用类。然后,您可以使用这些类来设置文档样式。

如果未启用触摸事件,则Modernizr可以添加no-touch类:

<html class="no-touch">

然后使用此类确定悬停样式的范围:

.no-touch a:hover { /* hover styles here */ }

您可以 下载自定义Modernizr构建 包括您需要的少量或多个功能检测。

以下是可能应用的一些类的示例:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">
18
Beau Smith

一些设备(正如其他人所说)同时具有触摸和鼠标事件。例如,Microsoft Surface有一个触摸屏,一个触控板和一个触控笔,当它悬停在屏幕上方时实际上会引发悬停事件。

任何根据“触摸”事件的存在禁用:hover的解决方案也会影响Surface用户(以及许多其他类似设备)。许多新的笔记本电脑都是触摸式的并且会响应触摸事件 - 所以禁用悬停是一种非常糟糕的做法。

这是Safari中的一个错误,对于这种可怕的行为绝对没有理由。我拒绝破坏非iOS浏览器,因为iOS Safari中存在多年来一直存在的错误。我真的希望他们下周能为iOS8解决这个问题,但与此同时......

我的解决方案

有人建议使用Modernizr,Modernizr允许您创建自己的测试。我在这里基本上做的是“抽象”支持:hover的浏览器的想法进入Modernizr测试,我可以在整个代码中使用它而不需要整个if (iOS)硬编码。

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

然后css变成这样的东西

html.workinghover .rollover:hover 
{
    // rollover css
}

仅在iOS上,此测试将失败并禁用翻转。

这种抽象的最好的部分是,如果我发现它在某个Android上中断或者在iOS9中修复了那么我可以修改测试。

17
Simon_Weaver

FastClick库 添加到您的页面将导致移动设备上的所有点击都变成点击事件(无论用户点击的位置),因此它还应该修复移动设备上的悬停问题。我编辑你的小提琴作为一个例子: http://jsfiddle.net/FvACN/8/

只需在您的页面上包含fastclick.min.js lib,然后通过以下方式激活:

FastClick.attach(document.body);

作为附带好处,它还将消除移动设备遭受的恼人的300毫秒onClick延迟。


使用FastClick会产生一些轻微的后果,可能对您的网站有影响,也可能无关紧要:

  1. 如果您点击页面上的某个位置,向上滚动,向下滚动,然后将手指放在最初放置的完全相同的位置,FastClick会将其解释为“点击”,即使它显然不是。至少它是如何在我正在使用的FastClick版本(1.0.0)中工作的。从那个版本开始,有人可能已经解决了这个问题。
  2. FastClick删除了某人“双击”的能力。
16
Troy

一个更好的解决方案,没有任何JS,css类和视口检查:您可以使用交互媒体功能 (媒体查询级别4)

像这样:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS Safari 支持它

更多关于: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

11
Estevão Lucas

基本上有三种情况:

  1. User only 有一个鼠标/指针设备,可以激活:hover
  2. User only 有触摸屏,无法激活:hover元素
  3. 用户有 both 触摸屏和指针设备

如果只有前两个场景是可能的,那么最初接受的答案效果很好,其中用户具有 要么 指针或触摸屏。当OP在4年前提出问题时,这种情况很常见。一些用户指出,Windows 8和Surface设备正在使第三种情况更有可能。

针对无法在触摸屏设备上悬停的问题的iOS解决方案(由@Zenexer详细说明)很聪明,但可能导致直接代码行为异常(如OP所述)。禁用仅针对触摸屏设备的悬停意味着您仍然需要编写触摸屏友好的替代方案。检测用户何时同时指针和触摸屏进一步混淆了水域(如@Simon_Weaver所述)。

此时,最安全的解决方案是避免使用:hover作为用户与您的网站进行交互的唯一方式。悬停效果是指示链接或按钮可操作的好方法,但不应要求用户悬停元素以在您的网站上执行操作。

考虑到触摸屏重新思考“悬停”功能 对替代UX方法进行了很好的讨论。答案提供的解决方案包括:

  • 使用直接操作替换悬停菜单(始终显示可见链接)
  • 使用点按菜单替换悬停菜单
  • 将大量悬停内容移动到单独的页面中

展望未来,这可能是所有新项目的最佳解决方案。接受的答案可能是第二个最佳解决方案,但请务必考虑也有指针设备的设备。当设备有触摸屏只是为了解决iOS的:hover hack时,请注意不要消除功能。

4
thirdender

.css中的JQuery版本使用.no-touch .my-element:悬停所有悬停规则包括JQuery和以下脚本

function removeHoverState(){
    $("body").removeClass("no-touch");
}

然后在body标签中添加class =“no-touch”ontouchstart =“removeHoverState()”

一旦ontouchstart触发所有悬停状态的类被删除

1
Greg

感谢@Morgan Cheng的答案,但我稍微修改了JS函数以获取“ touchstart ”(代码取自@Timothy Perez answer ),但是,你需要jQuery 1.7+为了这

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });
0
3Gee

鉴于Zenexer提供的响应,不需要额外HTML标记的模式是:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

此方法首先触发鼠标悬停,然后单击秒。

0
veryphatic

我同意禁用悬停触摸即可。

但是,为了省去重写css的麻烦,只需在@supports not (-webkit-overflow-scrolling: touch) {}中包装任何:hover项。

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}
<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />
0
Jordan Young

当触摸不可用时,我创建了一个处理触摸事件的系统,而不是只有悬停效果,这已经解决了我的问题。首先,我定义了一个用于测试“tap”(相当于“click”)事件的对象。

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document

   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }

      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

然后,在我的事件处理程序中,我执行以下操作:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }

               // touch was click or touch equivalent
               // nromal handling goes here.
            });
0
donut