Touchend-event op een tablet - Softwareontwikkeling

vrijdag 8 mei 2015 22:48

Acties:

0 Henk 'm!

...

Topicstarter

Wat ik wil is heel eenvoudig dacht ik, maar het werkt niet goed.
Ik wil een klik-sleep-los-functionaliteit maken in een webbrowser. Op een gewone pc ontvang ik netjes de events in de volgorde mousedown-mousemove-mouseup-click. Met de onderstaande code krijg ik dan ook netjes de codes 2-4-6-11 te zien.

Maar op een tablet (Android 4.0 met default browser) werkt het totaal niet. Ik ontvang de events touchstart-touchmove, maar nooit een touchend of eventueel een mouseup -event.
Als ik niet sleep, dus gewoon het scherm aanraak en dan los, werkt het wel en ontvang ik de events touchstart-touchend-click.

Waarom ontvang ik bij het slepen de touchmove-event niet?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">      
        <script>
            function LoadPage()
            {
                hisObject = document.body;
                ThisObject.addEventListener('touchstart', function(e){CheckEvent(e,1);},true);  // Tablet
                ThisObject.addEventListener('mousedown', function(e){CheckEvent(e,2);},true);       // PC
                ThisObject.addEventListener('touchmove', function(e){CheckEvent(e,3);},true);       // Tablet
                ThisObject.addEventListener('mousemove', function(e){CheckEvent(e,4);},true);           // Tablet + PC
                ThisObject.addEventListener('touchend', function(e){CheckEvent(e,5);},true);            // Tablet
                ThisObject.addEventListener('mouseup', function(e){CheckEvent(e,6);},true);         // PC   
                ThisObject.addEventListener('mouseover', function(e){CheckEvent(e,7);},true);           // PC   
                ThisObject.addEventListener('mouseenter', function(e){CheckEvent(e,8);},true);          // PC   
                ThisObject.addEventListener('mouseout', function(e){CheckEvent(e,8);},true);            // PC   
                ThisObject.addEventListener('mouseleave', function(e){CheckEvent(e,9);},true);          // PC   
                ThisObject.addEventListener('blur', function(e){CheckEvent(e,10);},true);           // PC
                ThisObject.addEventListener('click', function(e){CheckEvent(e,11);},true);          // PC
            }
            
            function CheckEvent(aEvent, aAction)
            {
                document.getElementById("Debug").innerHTML = aEvent.clientX + " " + aEvent.clientY + " " + aAction;
            }
        </script>
        
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
                background-color: #FC99FF;
            }
        </style>
    </head>
    <body onload="LoadPage()">
        <div id="Debug"></div>
    </body>
</html>

Speel ook Balls Connect en Repeat

vrijdag 8 mei 2015 22:50

Acties:

0 Henk 'm!

CodeCaster

Can I get uhm...

quote: http://stackoverflow.com/...nt-doesnt-work-on-android
For anyone trying to figure out why touchend events are missing on Android v3 and v4 (maybe also v2.3), there is a long outstanding bug which only just got fixed in v4.1 (apparently):

http://code.google.com/p/android/issues/detail?id=4549

http://code.google.com/p/android/issues/detail?id=19827

To workaround this bug you have to call preventDefault() on either the touchstart or first touchmove event. Of course, this prevents the native scrolling, so you will need to re-implement that yourself.

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

vrijdag 8 mei 2015 23:23

Acties:

0 Henk 'm!

Onbekend

...

Topicstarter

Thanks.

Ik heb avonden naar de oorzaak van dit probleem lopen zoeken, maar nooit dit op stackoverflow gevonden.

Voor de volledigheid zet ik hier ook de aangepaste code neer voor anderen die ook tegen dit probleem aanlopen:

HTML:

                <script>
            function LoadPage()
            {
                ThisObject = document.body;
                ThisObject.addEventListener('touchstart', function(e){e.preventDefault();CheckEvent(e,1);},true);   // Tablet
                ThisObject.addEventListener('mousedown', function(e){CheckEvent(e,2);},true);       // PC
                ThisObject.addEventListener('touchmove', function(e){CheckEvent(e,3);},true);       // Tablet
                ThisObject.addEventListener('mousemove', function(e){CheckEvent(e,4);},true);           // PC
                ThisObject.addEventListener('touchend', function(e){CheckEvent(e,5);},true);            // Tablet
                ThisObject.addEventListener('mouseup', function(e){CheckEvent(e,6);},true);         // PC   
            }
            
            function CheckEvent(aEvent, aAction)
            {
                if (aEvent.clientX == null)
                    document.getElementById("Debug").innerHTML = aEvent.changedTouches[0].pageX + " " + aEvent.changedTouches[0].pageY + " " + aAction;
                else
                    document.getElementById("Debug").innerHTML = aEvent.clientX + " " + aEvent.clientY + " " + aAction;
            }
        </script>

Speel ook Balls Connect en Repeat