2

I'm trying to modify a jquery code for a website-based dropdown menu. Specifically I am working on a workaround for a premature touchcancel event being fired on Android Browser build 4.4.2 Samsung Galaxy S4.

Here's the code I'm trying to work with:

jQuery(document).ready(function ($) {
'use strict';
    $('.taptap-by-bonfire ul li ul').before($('<span><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><polygon id="arrow-24-icon" points="206.422,462 134.559,390.477 268.395,256 134.559,121.521 206.422,50 411.441,256 "/></svg></span>'));

    $(".menu > li > span, .sub-menu > li > span").on('touchstart click', function(e) {
    e.preventDefault();
        if (false == $(this).next().is(':visible')) {
            $(this).parent().siblings().find(".sub-menu").slideUp(300);
            $(this).siblings().find(".sub-menu").slideUp(300);
            $(this).parent().siblings().find("span").removeClass("taptap-submenu-active");
        }
        $(this).next().slideToggle(300);
        $(this).toggleClass("taptap-submenu-active");
    })  


    $(".menu > li > span").on('touchstart click', function(e) {
    e.preventDefault();
        if($(".sub-menu > li > span").hasClass('taptap-submenu-active'))
            {
                $(".sub-menu > li > span").removeClass("taptap-submenu-active");
            }
    })

    $(".taptap-menu-button-wrapper").on('touchstart click', function(e) {
        if($(".menu > li > span, .sub-menu > li > span").hasClass('taptap-submenu-active'))
            {
                $(".menu > li").find(".sub-menu").slideUp(300);
                $(".menu > li > span, .sub-menu > li > span").removeClass("taptap-submenu-active");
            }
    })

});

It works well on most devices and on most browsers. Only on that particular Android Browser, the menu drops down and quickly slides up again. I'm assuming a premature touchcancel event is being fired. I've tried various things, but I can't seem to have all these elements and not have a touchcancel firing up on that device no matter what I try.

Is there anything I can do to get around this issue with the Android Browser?

inmyth
  • 8,880
  • 4
  • 47
  • 52
user3839044
  • 235
  • 1
  • 6
  • 22
  • Specify the browsers you use (Chrome, etc) and their versions. – inmyth Apr 26 '15 at 04:40
  • The issue is present on that device and the default android browser only on build 4.4.2. It's not present on chrome browser on that same device and is not present on some other devices with the android browsers and with the same build. – user3839044 Apr 26 '15 at 04:47
  • For future reference, the answer here works perfectly: http://stackoverflow.com/questions/10367854/html5-android-touchcancel – Sam P Jul 24 '15 at 20:26

0 Answers0