touchEnter/touchLeave do not work

Question

Talk to the guys! My question is the following: Why these touch events are not being recognized when I enter the DOM element with my finger, 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 the touchMove works.

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

Answer 1

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

For example, with a mouse, you can hover over an element and/or click on it. On touch, you do not have this option hover¹. The only way to select or trigger an event is by tapping the screen, so it makes no sense to have a receiver for this type of event.

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

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

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

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

for:

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

^{1. Some smartphones (such as the Galaxy S4) have sensors that trigger event hover when approaching the screen. But this functionality is not yet market standard.}