javascriptmouseeventtouch-event

Is it possible to implement "enter" event detection with touch events?


I have a requirement to do the following

  1. The user clicks a square on the screen.
  2. There are neighbor squares because it's a grid, the user then, can move to a neighbor square without releasing the mouse, I need to detect the mouse entering into this new square to activate the next one, after the first movement, the direction of movement becomes fixed.
  3. Repeat, until the mouse is realease, when the mouse is released, check if things match and that's all.

I have implemented this farily well with onmousedown, onmouseenter and onmouseleave, adding a onmouseup to the document where I handle the last step.

The problem is, that I need this to work in a mobile device. I have managed to implement dragging divs with a touchstart, touchmove combination and it was straightforward. Now I attempted to implement the behavior described above but I found out that,

It's frustrating that there is no seamless way to do this, I do understand that touch devices are not the same as mouses, but there are common behaviors that I consider should be treated without much difference, and only treat differently the special things that each device has.

If there is a way to do this, I am really going to be grateful, because I am very tired of reading documentation and trying things that appear to solve the problem but don't.

As requested in the comments, this is my grid enter image description here

Note that this grid, is not static, nor is it created directly with HTML, it's extracted from a file and generated with a different program, it's simply a <table>.


Solution

  • My final solution is to add a touchmove listener on the container (the table body), and then using elementFromPoint() trigger the event for the given element manually.

    I keep track of the last element for which the event was triggered, to prevent doing it more than once. And it also allows to trigger touchleave if required.