JQUERY / CSS iPad问题：为什么双击需要选择单选按钮？

Question

所以我遇到这个问题，我在显示一个带有几个单选按钮的div，将鼠标悬停在菜单项上。

1. 我的问题：在iPad和iphone上我需要点击两次单选按钮，直到它们被选中。 （在桌面上没问题）

2. 我的问题：我该如何处理用户只需点击一次？

3. 代码：
   （a）以下是显示该菜单的代码 div ：

           // when entering/leaving the popup, show/hide it
           slide.on('mouseenter', function() {
               $(this).css('display', 'block');                                
           })
           slide.on('mouseleave', function() {
               $(this).css('display', 'none').removeClass('open');
           })
   

   （b）同样代码，绑定点击到单选按钮：

           // check if filter is applied and add active icon
           $('div.slide > fieldset > input').on('click', function() {
   
               if ($(this).hasClass('color_input')) {
                     color_kleider.addClass('color_active');
               }
   
           })
   

4. RES：
   （a）查看实时网站：Outfitya
   （b）见图：

Answer 1

我相信您的第一次触摸是激活mouseenter事件，您的第二次点击实际上是激活点击事件。

在您的情况下，我认为您不需要触摸设备上的mouseenter事件，但第一次点按仍应激活下面的click事件。您可以将this.stopPropgation()添加到幻灯片的mouseenter处理程序，并查看点击是否在第一次点击时注册。

我还要注意，在注册下一个事件之前，mouseleave不会在iOS上触发，因为在触摸界面中，“光标”仍然是您上次触摸屏幕的位置直到它出现在另一个地方。

理想情况下，您应该这样写，以便触摸设备不会注册任何悬停事件。