touch event and mouse event in html page

Question

1) I'm building a very normal HTML5 website.

On this website there are few clickable elements. Those are embedded in multi-layer div.

HAML speaking it looks as :

%body
  #root
    #content
  #header
  #footer

In my div #content I have few clickable buttons. Some dragable elements. And video players.

-> this make use of mouse events as click , mousemove , mouseenter ...

2) I'm adding a touch gesture detection

Everything is fine until I want to add a layer (a div) to catch touch gestures.

Then I obtains this :

%body
  #root
    #content
  #header
  #footer
  #touch-area

This #touch-area size of the window is capable to interpret user touch gesture via touchstart , touchmove , touchstop

3) cool! but I'm loosing control of mouse events

The issue with this construction is all mouse events are caught by #touch-area

I've tried few «hacks»

3.1) via CSS

adding pointer-events: none to #touch-area disable touch event at same time.

3.2) What is it possible in JS?

Reading Click through div . The guy add a click listener to top div. Hide this div. Re-trigger the event. Re-show the div.

It could work but:

• it use jQuery
• I've to specify all events I want to let pass trough my #touch-area

3.3) ok, let's focus on mousemove

So I read this post about HTML5 and touchscreen . And I found this interesting event order :

 1. touchstart 2. touchmove 3. touchend 4. mouseover 5. mousemove 6. mousedown 7. mouseup 8. click 

And I though:

• First I add mousemove listenner to #touch-area . Where I hide #touch-area .
• Then all events will go though.
• And on side I add a timeout routine to show #touch-area after few ms. That to catch again touch events.

But... when I swipe on the touchscreen. It first detect few mousemove . Then the sequence touchstart , touchmove , touchstop is fired.

begin log of event on #touch-area when I swipe my finger :

( event name followed by event time )

 mouse enter 1490656039478 mouse move 1490656039479 mouse enter 1490656039483 mouse move 1490656039484 touch start 1490656039485 touch move 1490656039492 touch move 490656039498 

... then there is only touch move until touch stop

so my plan is broken :(

4) stackoverflow could you help me?

How to have a top layer capable to catch touch gestures and bellow normal clickable buttons?

Answer 1

This will allow clicks to pass through #touch-area , without using jQuery :

let touchArea = document.getElementById('touch-area');
touchArea.onclick = function(e){
  touchArea.style.display = 'none';
  document.elementFromPoint(e.clientX, e.clientY).click();
  touchArea.style.display = 'block';
  return false;
}

Working example . While it works for click s, having it work for hover is a completely different matter and frankly, I have no idea on how you could achieve that.

Answer 2

Why not simply check the device for touch support, and only then insert the #touch-area div dynamically?

My goto solution for evaluating if a device supports feature x is https://modernizr.com/ .

Here's a quick intro to using Modernizr to identifying the devices that support touch events, and those that don't: http://www.hongkiat.com/blog/detect-touch-device-modernizr/

Answer 3

You have to use the preventDefault() method in the touch event handlers.

Supporting Touch and Mouse event