Vant Popover 事件点击两次才能触发

Posted 2023-03-19

参考技术A 开发的时候需要做一个弹窗形的二级导航，所以选择了Vant的Popover组件，最后在调试的时候发现绑定的 @select="onSelect" 需要点击两次才能触发。

这是因为移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。

先执行安装fastclick的命令

之后在全局或者当前需要的页面使用fastclick

Vue.js - 移动端Click事件300毫秒延迟解决方案（fastClick.js）

在使用fastclick之后vant轮播时触发了 click 事件，fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

为啥/何时我必须点击两次才能触发 iOS 上的点击

【中文标题】为啥/何时我必须点击两次才能触发 iOS 上的点击

【英文标题】：Why/when do I have to tap twice to trigger click on iOS为什么/何时我必须点击两次才能触发 iOS 上的点击

【发布时间】：2013-07-17 21:49:57

【问题描述】：

好吧，我觉得我疯了……

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

Mobile Safari spec 说：“……单指和两指手势生成的事件流取决于所选元素是否可点击或可滚动……可点击元素是链接、表单元素、图像地图区域或任何其他带有 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 上点击元素。 什么都没有发生

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

确定在第一次点击时点击元素会触发“点击”事件的确切标准是什么？与在第一次点击时触发“悬停”事件和“点击第二次点击事件。

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

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

我很乐意回答问题/请求。

谢谢！

【问题讨论】：

是的，Apple 的 onclick 建议仍然不起作用（iOS 模拟器）:-(

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

我为此奋斗了好几个小时，寻找一百万个其他问题。在我的情况下，使用 Angular ng-switch 和 ng-show 来显示/隐藏元素（通过更改显示 CSS 值），这导致 iOS 不触发点击的奇怪问题。

哇。这真的很难发现。谢谢！

【参考方案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

【讨论】：

这似乎为我解决了问题 - 谢谢。

【参考方案4】：

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

【参考方案5】：

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

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

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

【参考方案6】：

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

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

.button 
    background: '#000'


@media (min-width: 992px) 
    .button:hover 
        background: '#fff'
    

【参考方案7】：

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

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

在 2019 年，大多数（如果不是全部）上述情况现在都可以使用 a CSS only solution 得到改善……但是，它需要对样式表进行一些重构。

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 不再像以前那样清晰，因为手写笔输入、触摸桌面和移动设备对这个概念有不同的解释。

【参考方案8】：

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

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

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

【讨论】：

如果不能在安卓上运行，那就不是一个好的解决方案。

【参考方案9】：

您可以在元素上使用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();

);

【参考方案10】：

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

Jquery hover function and click through on tablet

$('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);
    
);

【参考方案11】：

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

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

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

干杯:)

【讨论】：

我使用 FastClick JS Pplyfill 解决了这个问题 — github.com/ftlabs/fastclick

此链接现已损坏。

@cale_b: web.archive.org/web/20140326101523/https://…