touchEnter / touchLeave do not work

Question

touchEnter / touchLeave do not work

Navigation

#1 by (1 votes)

1

Talk the guys! My question is this: Why are these touch events not being recognized when I tap the DOM element, or when I leave it?

var canvasControlsHUD = document.getElementById("canvasControlsHUD");

canvasControlsHUD.addEventListener('touchenter',function(){
        alert('Entered!');
    },false);
    canvasControlsHUD.addEventListener('touchleave',function(){
        alert('Left!');
    },false);

Only touchMove works.

canvasControlsHUD.addEventListener('touchmove',function(){
        alert('Moved!');
    },false);

javascript html5 canvas

asked by anonymous 17.08.2014 / 19:43

1 answer

Wait for response of a method to proceed Set the Fullcalendar to initially display the week tab instead of the month

score 1 · Accepted Answer

Touch events have a slightly different naming pattern than mouse events, mainly due to the difference in functionality between both types of events.

For example, with a mouse, you can hover over an element and / or click it. No touch, you do not have this option of hover 1 . The only way to select or fire an event is by tapping the screen, so it does not make sense to have a receiver for this type of event.

Below is the list of touch values, corresponding to mouse :

mousedown = touchstart
mouseup = touchend
mousemove = touchmove
mouseleave = touchleave

In your case, I think the ideal would be to change:

canvasControlsHUD.addEventListener('touchenter',function(){
    alert('Entered!');
},false);

by:

canvasControlsHUD.addEventListener('touchstart',function(){
    alert('Started!');
},false);

1. Some smartphones (such as the Galaxy S4) have sensors that trigger hover events as they approach the screen. But this feature is not yet the industry standard.