2

所以我遇到了这个问题，我在将鼠标悬停在菜单项上时显示一个带有几个单选按钮的 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）在此处查看此图片：

带有单选按钮的菜单

4

1 回答 1

2

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

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

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

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

于 2013-05-20T04:42:50.647 回答