40

好吧，我感觉我疯了……

我正在查看 iOs 6.0 上的 Mobile Safari。我似乎无法确定点击元素何时会触发点击的任何押韵或理由。在许多情况下，似乎我需要点击一次来触发悬停，然后再次触发点击。

Mobile Safari 规范说： “ ......由单指和两指手势生成的事件流取决于所选元素是否可点击或可滚动......可点击元素是链接、表单元素、图像地图区域或任何其他带有 mousemove、mousedown、mouseup 或 onclick 处理程序的元素...由于这些差异，您可能需要将某些元素更改为可点击元素..."

它继续建议开发人员“...添加一个虚拟的 onclick 处理程序，onclick = "void(0)"，以便 iOS 上的 Safari 将 span 元素识别为可点击元素。”

但是，我的测试表明这些陈述是错误的。

JsFiddle：http: //jsfiddle.net/6Ymcy/1/

html

<div id="plain-div" onclick="void(0)">Plain Div</div>

js

document.getElementById('plain-div').addEventListener('click', function() {
   alert('click'); 
});

尝试在 iPad 上点击元素。 什么都没发生

但我离题了。对我来说重要的是找出以下问题：

究竟是什么标准决定了点击一个元素何时会在第一次点击时触发一个“点击”事件？ 与第一次点击时触发“悬停”事件和第二次点击时触发“点击”事件相反。

在我的测试中，锚元素是我可以在第一次点击时触发点击的唯一元素，然后，只是偶尔且不一致。

这就是我开始感到疯狂的地方。我在互联网上进行了广泛搜索，几乎没有发现任何关于这个问题的信息。只有我吗？！有人知道在哪里讨论过两次点击的标准和/或处理这些限制的方法吗？

我很高兴回答问题/请求。

谢谢！

4

11 回答 11

13

我有同样的问题。mouseenter最简单的解决方案是不在iOS（或任何支持触摸的目标平台）上绑定事件。如果未绑定，悬停事件将不会被触发并click在第一次点击时触发。

于 2015-04-09T20:16:52.680 回答
10

如果元素为“display: none;”，iOS 将触发悬停事件 在正常状态和“显示：块；” 或内联块：悬停。

于 2015-09-22T00:59:23.950 回答
3

我解决了这个问题，首先检测它是否是 iPhone，然后将 mouseup 事件绑定到我试图调用的函数。

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){
        ...
    }
}

我尝试了其他事件，但 mouseup 似乎效果最好。即使用户尝试滚动，其他事件（如 touchend）也会触发。如果您在触摸后拖动手指，Mouseup 似乎不会被触发。

iPhone 检测归功于 David Walsh（和 ESPN）。 http://davidwalsh.name/detect-iphone

于 2015-09-02T17:33:30.740 回答
3

我在使用 Bootstrap 时遇到了这个问题，我发现罪魁祸首是工具提示。从按钮中删除工具提示，您不再需要点击它两次。

于 2015-10-09T14:49:24.913 回答
3

值得一提的是，':hover' 伪类可能会阻止 'click' 事件触发。

由于在移动浏览器中，点击有时被用来代替悬停动作（例如显示下拉菜单），它们可能会在第一次点击时触发人为的“悬停”状态，然后在第二次点击时处理点击。

有关详细说明和示例，请参阅https://css-tricks.com/annoying-mobile-double-tap-link-issue/。

于 2017-05-30T06:20:58.470 回答
1

我的解决方案是从 css 中删除 :hover 状态，当你想到它时，移动浏览器不应该有 :hover 状态，因为没有悬停..

如果要在桌面上保持悬停状态，可以使用媒体查询，如下所示：

.button {
    background: '#000'
}

@media (min-width: 992px) {
    .button:hover {
        background: '#fff'
    }
}
于 2018-03-27T10:37:49.137 回答
1

你需要@media (hover) { /* Your styles */ }

据我所知，这个问题仍然以各种形式存在。

在 2019 年，大多数（如果不是全部）上述情况现在都可以使用纯 CSS 解决方案来改善……但是，这将需要一些样式表重构。

label {
  opacity:0.6  
}

label input[type=radio]:checked+span {
  opacity:1
}

.myClass::before { } /* Leave me empty to catch all browsers */

a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }



/* Your styles */
@media (hover) {
  a:hover { color: red }

  .myClass::before { background: black }

  label:hover {
    opacity:0.8
  }
}

您可以在这里更详细地阅读为什么Fastclick, :pseudo, <span>, 仅针对“桌面”分辨率并且first tap is hover and second tap is click都使用以下方法修复@media (hover)：https ://css-tricks.com/annoying-mobile-double-tap-link-issue/

:hover不像以前那样清晰，因为手写笔输入、触摸桌面和移动设备对这个概念有不同的解释。

于 2019-03-01T10:20:02.887 回答
0

您可以在元素上使用ontouchstart而不是onclick事件，并在该元素上调用函数 focus() 如果它是输入的：

document.getElementById('plain-div').addEventListener('touchstart', function() {
   //write body of your function here
    alert(“hi”);
  // if input needs double tap 
  this.focus();

});
于 2020-03-01T21:14:45.833 回答
0

显示：无；上述解决方案适用于 iOS（未在 9.3.5 之后测试），但不适用于 Android。

一个 hacky css-only 解决方案是使用负 z-index 隐藏元素下方的链接，并在 :hover 或 first-touch 上将链接提升到正 z-index（具有小的转换延迟）。我想使用 css translate 而不是 z-index 可以达到相同的结果。适用于 iOS 和 Android。

通过这种方式，您可以在第一次点击时在触摸屏设备上的链接上显示悬停效果，而无需在第二次点击之前激活 url。

于 2018-01-03T21:35:14.047 回答
-1

我在谷歌上搜索，看看我是否可以帮助你，并找到了这段代码。尝试根据自己的喜好对其进行修改，看看是否可以做您尝试的事情。如果您在理解它时遇到困难，请告诉我，我会详细说明。这里还有更多我找到它的地方

Jquery悬停功能并在平板电脑上单击

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});
于 2013-07-17T23:46:52.650 回答
-1

从来没有弄清楚标准，但这通过在点击元素后立即触发点击解决了我的问题：

https://developers.google.com/mobile/articles/fast_buttons

我必须对他们的代码进行一些添加/修改才能使其正常工作，如果您对我的方法感兴趣，请告诉我，我会尝试发布解释。

干杯:)

于 2013-10-16T02:42:19.583 回答