CODEWITHSUNDEEP
jqueryioscss
ItsMeDom
ItsMeDom

Reputation: 550

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

So I am having this issue where I show a div with a couple radio buttons on hover over a menu item.

  1. My problem: On iPad and iphone I need to tap on the radio buttons twice until they get selected. (on desktop no problem)

  2. My question: How do I do it that the user only needs to tap once?

  3. The Code:
    (a) Here's the code for showing that menu 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) Also code, that bind a click to the radio buttons:

            // 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) see the live website: Outfitya
    (b) See this pic here:

menu with radio buttons

Upvotes: 2

Views: 2174

Answers (1)

cloudworks
cloudworks

Reputation: 619

I believe your first touch is activating the mouseenter event, your second tap is actually activating the click event.

In your case, I don't believe you need the mouseenter event on touch devices, but the first tap should still be activating the click event underneath. You might add this.stopPropgation() to slide's mouseenter handler and see if the click registers on the first tap.

I would also note that mouseleave won't fire on iOS until the next event is registered, as in a touch interface, the "cursor" remains where you last touched the screen until it turns up at another location.

Ideally, you should write this so that touch devices do not register any hover event.

Upvotes: 2

Related Questions