locked
MSPointerDown event only fires on a long tap, not a quick tap

    Question

  • I'm editing the top nav of a site to work on IE10/Windows8 tablets like the Surface Pro. In the initial iteration, I just added aria-haspopup="true" to the hover elements and it worked pretty well -- one tap to show the hidden menu, a second tap shows the :hover effect, a third tap to navigate to the URL. But, the client wanted the second tap to navigate to the URL instead (you know, like it would work on pretty much any other device...), so I popped a JQuery script in there to hopefully just navigate to the destination like it's supposed to.

    Here's the URL: http://www.urlgone.com/d1c365/

    I'm pretty close to having it work, but the weirdest thing is happening. If you tap the item, it goes into its hover state (white text) rather than clicking through. But if you hold your tap for a little bit longer, it works! What on earth is going on? This is my code:

    $(document).ready(function(){
        if (window.navigator.msPointerEnabled) {
            $('#nav a').on("MSPointerDown", function(event){
                window.location = $(this).attr('href'); 
                return false;
            })
        }
    });

    The client has confirmed that it's doing this on his Surface tablet, and I'm able to replicate the problem in a Virtual Windows 8 environment running Microsoft Windows Simulator.

    Any ideas? I've been reading through the MS documentation here http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx but from what I understand, MSPointerDown is the umbrella event, and should cover any of the other gestured listed there -- MSGestureTapMSGestureHoldetc. I'm not even sure what I would console.log to find out the different between the ineffective "tap" and the effective "longer tap"...

    Wednesday, May 08, 2013 5:00 PM

All replies