TouchEmulator doesn't play nicely with form inputs (specifically text <input>s and <textarea>s): you can't click to focus them, and when they are focused, you can't move the cursor or change the selection.

I'm not sure if this is the best fix, but it seems to work in my very limited testing.

I tested the script as bookmarklet on many mobile capable sites that use touch event, and since the small circle uses bubbling phase, it was being cancelled by some websites. By using capture phase, it works flawlessly, as I didn't find any website canceling the events during capture phase.

Other websites that use zIndex and translate3D are able to hide the small circle. By adding zIndex:100 should help most cases.

Hi J. Tangelder,

Here are two changes, please take a review:

1. For DOMs inside Web Components, it emulates event bubble from composedPath()[0] to ev.target.
2. Adds vite as static server. Adds index.html for test manual pages.

Steps to reproduce this bug:

1. Take mobile phone and open this example https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html
2. Put two fingers over each other vertically, rotation will have wrong initial angle.

In this PR this bug is fixed. Here related bug in hammer.js documentation example: hammerjs/hammer.js#1215

Hi J. Tangelder,

Here is my implementation to emulate event bubbles for DOMs inside web components. My previous solution was too simple. Please take a review.

1. It triggers touch events from composedPath()[0] to ev.target.
2. Adds vite as static server. Adds index.html for test manual pages.

To get this to work with the current hammerjs and modern browsers, I had to explicitly setup hammerjs with an inputClass designation:

let hammertime = new Hammer(canvas, { inputClass: Hammer.TouchInput })

Otherwise it was only recognizing pointer events and not multitouch events needed for things like pinch/rotate etc.

This may be related to: https://github.com/hammerjs/touchemulator/issues/2

TouchEmulator();

class Block extends HTMLElement{

    constructor(){
        super()				
    }				

    connectedCallback(){ 
        const shadowRoot = this.attachShadow({mode: 'open'});		 	
        let $div = document.createElement("div")			  	
            $div.style.width = "100px"
            $div.style.height = "100px"
            $div.style.backgroundColor = "red"

        shadowRoot.append($div)	  	

        this.addEventListener("touchstart",(e)=>{
            console.log("touch my-block")
        })

        $div.addEventListener("touchstart",(e)=>{
            // This handler is not called if TouchEmulator() has been called. 
            // This is only broken if attached to a shadowRoot instead of the actual element. 
            console.log("touch my-block div")
        })
    }
}
customElements.define('my-block',Block)

Attempting to create a new TouchEvent using the provided Event as a TouchEventInit dictionary results in an error:

ex.

document.body.addEventListener("touchstart",(e)=>{			
    document.body.dispatchEvent(new TouchEvent("touchmove",e))
})		

... Failed to construct 'TouchEvent': Failed to convert value to 'Touch'....

I think this is expected based on the described test failures, but this may be a not-uncommon use case, so I thought I'd log it.

I think it doesn't simulate the default 'swipeleft' and 'swiperight' gestures. I can't make it work for my swipeleft and swiperight events created in Edge Animate. Am I wrong? Are you considering adding that feature?