Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

Touchend-event op een tablet

Pagina: 1
Acties:

Acties:
  • 0Henk 'm!

  • Onbekend
  • Registratie: juni 2005
  • Laatst online: 19:08
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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 Airplane Manager en Repeat


Acties:
  • 0Henk 'm!

  • CodeCaster
  • Registratie: juni 2003
  • Niet online

CodeCaster

👌👀 good shit ✔💯

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.

As always, we are nailed to a cross of our own construction.


Acties:
  • 0Henk 'm!

  • Onbekend
  • Registratie: juni 2005
  • Laatst online: 19:08
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
                <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 Airplane Manager en Repeat



Apple iPhone 12 Microsoft Xbox Series X LG CX Google Pixel 4a CES 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True