Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile Safari - "touchend" event not firing when last touch is removed?

The "gesture" I'm trying to capture is a tap when but only when an element (other or same) already has a touch on it. So, touch (1) presses the button down while touch (2) taps to selected options, touch (1) releases and button is depressed.

The problem I'm having is with the last bit. The "touchend" event is not being fired when I release the last finger? So I have no way of depressing the button?

..also the "touchend" event always has touches.length = 0?

Here is some code so you can see what I mean. I think this may be a bug in mobile safari?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Multi-touch problem</title>
        <style>
            #touchpane{
                width:900px;
                height:500px;
                background-color:#333;
            }
        </style>
    </head>
    <body>
        <div id="touchpane" click="void();"></div>
        <script>
                var tp = document.getElementById("touchpane");
                tp.addEventListener('touchstart', function(e){
                    e.preventDefault();// to stop copy and paste
                    console.log("touchstart " + e.touches.length );
                }, false)
                tp.addEventListener('touchend', function(e){
                    console.log("touchend " + e.touches.length );
                                    // not called when last finger removed?
                }, false)
                tp.addEventListener('touchcancel', function(e){
                    console.log("touchcancel");
                }, false)
        </script>
    </body>
</html>
like image 334
ad rees Avatar asked Sep 08 '10 10:09

ad rees


People also ask

Does Safari support touch events?

Safari mobile doesn't support touch events. We have tried to fix it with mouse events as it was written in the apple documentation but had no success.

What is a touchend event?

The touchend event occurs when the user removes the finger from an element. Note: The touchend event will only work on devices with a touch screen. Tip: Other events related to the touchend event are: touchstart - occurs when the user touches an element.

What is the use of Touch_move?

Definition and Usage The touchmove event occurs when the user moves the finger across the screen. The touchmove event will be triggered once for each movement, and will continue to be triggered until the finger is released. Note: The touchmove event will only work on devices with a touch screen.

What is touchend in javascript?

The touchend event fires when one or more touch points are removed from the touch surface.


1 Answers

I can help you with one problem, but I don't know why the "touchend" isn't firing when both fingers leave the screen, when I run your code above, the "touchend" fires when either finger leaves the screen (on an iPhone 4)

1) While the "touchend" javascript event for iPhone does have the "touches" property, it's always going to be empty when the last finger leaves the screen, because "touches" for the iPhone represents fingers currently touching the screen, and "touchend" only fires after a finger leaves the screen. So on "touchend" "e.touches.length" will always be 0 when the last finger is lifted.

2) You can access which touches have changed in the "touchend" event by using the "changedTouches" property. This is problematic because it's behaviour is not very consistent.

If you touch the screen with one finger, then another, and then you remove one finger, a number of things could happen.

If you when you have removed the second finger, nothing has changed about the first finger, your event object in "touchend" will have "touches.length = 1" (the finger still on the screen) and "changedTouches.length = 1" (the finger that left the screen).

However, if you are moving the first finger (even a bit) when you remove the second finger, then on "touchend" your event object will have "touches.length = 1" (the finger still on the screen) and "changedTouches.length = 2" (the finger that left the screen + the movement of the first finger).

I found this article very helpful:

http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/

like image 62
JoeDuncan Avatar answered Oct 05 '22 23:10

JoeDuncan