JQUERY/CSS iPad 问题 : Why double tap needed selecting a radio buttons?

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) 还有代码，将点击绑定(bind)到单选按钮:

           // 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. 回复:
   (a) 查看实时网站:Outfitya
   (b) 在此处查看此图片:

Answer 1

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

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

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

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