touchenter event not being called

Question

Can anyone tell me why the touchenter event is not working in this code. The mouseenter works fine on a desktop. Should be so simple, I'm missing something though.

Example here - http://jsfiddle.net/gCEqH/6/

Full code below:

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

    <body>
        <img id="myImg" src="http://jackiehutchings.com/wp-content/uploads/2011/09/g-plus-icon-96x96.png" />        

        <script>
            $(window).load(function() { 
            $('#myImg').on("touchenter mouseenter", function(event){
                alert('entered!');
            });
        });
        </script>
    </body>
</html>

Are you sure, it works for me on Windows Phone? What browser? — , Feb 12 '13 at 03:33
Doesn't work on Android phone or iPad. On the phone I've tried both the standard browser and Opera. — Justin, Feb 12 '13 at 05:13
its working fine for me in ipad. its working fine when you on it. are you looking for hover in touch? — Karthi Keyan, Feb 12 '13 at 06:17
What I need it to do, is if you touch outside the image, then slide your finger into the image, I need it to detect when the touch enters the image. It detects if I simply tap the image, but nothing else. — Justin, Feb 12 '13 at 16:59
I did some additional testing. From what I can tell, "touchenter" seems to only fire when I touch and release an element. Like a simple tap. "touchmove" works properly, but it is called from the element where the touch began, not the element that your touch is currently over. It does not seem reasonable to do the XY calculations every time "touchmove" gets called to determine which element I'm currently over. It could be called a few hundred times a second. If "touchenter" worked the way I'm understanding that it should work (like mousemove on a desktop), it would be far more efficient. — Justin, Feb 12 '13 at 22:05
I've had some issues with this - has anyone come across a solution that makes sense? Some say use touchmove and then document.getElementFromPoint(e.pageX, e.pageY).. but that is way too much processing. Basically you want to touchdown, then drag your finger around and have the elements (of the same class as the touchdown) underneath light up or such. — Jonathan Tonge, Feb 24 '13 at 01:17
I never did get touchenter working properly. Never found much useful info on the web either. Touchmove with getElementFromPoint is VERY slow, I tried. I was comparing against hundreds of elements though. Just a few may work fine. If the elements you're comparing against don't move, then try this: Put the start and end XY values of each element into an array when the page loads. When touchmove is called, iterate through the array comparing against the event's XY values. I got it working with that method with almost no slowdowns. It was FAR more efficient than getElementFromPoint. Good Luck. — Justin, Feb 24 '13 at 06:12

score 0 · Answer 1 · answered Dec 13 '13 at 23:08

Maybe something like this would work?

var elementIdTouching = "";
$('body').on("touchmove", function(e){
    var tList = e.touches; // get list of all touches
    for (var i = 0; i < tList.length; i++) {
        var thisTouch = tList[i]; // not 100% sure about this
        var elementTouching = document.elementFromPoint( 
            thisTouch.screenX, 
            thisTouch.screenY
        );
        if (elementTouching.id != elementIdTouching) {
            elementIdTouching = elementTouching.id;
            if (elementTouching.id == "myImg") {
                alert("entered!");
            }
        }
    }
}).on("touchend", function(e){
    elementIdTouching = "";
});
$('#myImg').on("mouseenter", function(e){
    alert('entered!');
});

tList ~ https://developer.mozilla.org/en-US/docs/Web/API/TouchList

Disclaimer: I haven't tested this.

That approach does work but is very slow. I came up with a workaround though. (see my comments above). — Justin, Dec 14 '13 at 02:42
According to quirksmode, `clientX` and `clientY` would be a better choice than `screenX` and `screenY`: http://www.quirksmode.org/dom/w3c_cssom.html#t20 — Webthusiast, Feb 13 '14 at 17:35

touchenter event not being called

1 Answers1