Simulating Javascript mouseover events on touch screens using touchmove attributes and document.elementFromPoint

touchmove-mouseover-simulation.md

I made an HTML port of game of life made with a table of checkboxes based on Pluralsight's Play by Play: HTML, CSS, and JavaScript with Lea Verou (http://www.pluralsight.com/courses/play-by-play-lea-verou). I was able to create a cool mousedown interface that allowed the "player" to draw on the board by dragging the mouse while it was down, and wanted to do the same for touch devices.

Unfortunately, touch events only hold references to the DOM element where they began (i.e. where "touchstart" fired) and do not recognize the DOM elements that exist under them (a detailed explanation for this can be found here: http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch).

Instead, touch events maintain several lists of Touch objects - which represent interactions with the touch screen. Among these objects' properties are clientX and clientY, which indicate the X and Y coordinates of the events relative to the viewport (go to http://www.javascriptkit.com/javatutors/touchevents.shtml for more details on the subject).

I decided to see whether the DOM provided a lookup function that could lookup DOM nodes based on their coordinates, and found "document.elementFromPoint" thanks to the following question: http://stackoverflow.com/questions/4786066/locating-dom-element-by-absolute-coordinates.

Finally, I created a 'touchmove' event listener that called the elementFromPoint method using the coordinates of the relevant touch event (for me, this was e.touches[0]) and then made the appropriate change to the elemet (in my case, toggling the textbox checked attribute). Here is a the event listener:

    //this.gameGrid is a parent element for the checkboxes
    this.gameGrid.addEventListener("touchmove", function(e) {
                // get the touch element
                var touch = e.touches[0];

                // get the DOM element
                var checkbox = document.elementFromPoint(touch.clientX, touch.clientY);

                // make sure an element was found - some areas on the page may have no elements
                if (checkbox) {
                    // interact with the DOM element
                    checkbox.checked = !checkbox.checked;
                }
                ...
			});

You can see a working example of this here: http://codepen.io/VehpuS/full/pJZQgm If the code is broken or has changed beyond recognition (I'm still improving it) - the raw found in my gitHub account (and can be then run locally on chrome with touch simulation): https://github.com/VehpuS/game-of-life-pluralsight/tree/2c992f545b96831c3ac31b8e978f7e9edd7212d7.

Perfect! Just added this to a Svelte app!

You are my saviour!