CODEWITHSUNDEEP
javascripthtmlcsstouchtouch-event
mickro
mickro

Reputation: 891

touch event and mouse event in html page

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:

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:

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?

Upvotes: 2

Views: 3789

Answers (3)

sumana
sumana

Reputation: 21

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

Supporting Touch and Mouse event

Upvotes: -1

tao
tao

Reputation: 90068

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 clicks, having it work for hover is a completely different matter and frankly, I have no idea on how you could achieve that.

Upvotes: 1

Anna Fohlmeister
Anna Fohlmeister

Reputation: 447

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/

Upvotes: 0

Related Questions