CODEWITHSUNDEEP
javascripthtmloverlay
Andrew
Andrew

Reputation: 1

manually trigger releasing the pressed/touched element

The essence of the problem is releasing a touch on an element count as click event on an overlay element which is displayed during the touch and hold.

How can I prevent that from happening?

<https://jsfiddle.net/24r1s6nf/1/>

I have recreated this problem in jsfiddle. The problem only happens in mobile browser. Once your tap is finished, the overlay script gets triggered unexpectedly.

I have a script to display a modal on a webpage when an element is pressed/touched for over 1 second, and also display the overlay. The overlay has a function to hide modal when clicked.

The workflow works as follows:

  1. press and hold element h1 for 1 second on z-index 1
  2. display modal on z-index 3
  3. display overlay on z-index 2

The problem is when I release the touch in mobile chrome IOS, the overlay has also been displayed under the touched location. So when I release the touch to display the modal, the click event is automatically triggered on the overlay and also the hide modal script, which is not what I intended to do.

Is there a way to force release a real touchend event on element so that I can use to call before overlay starts. I tried the following which doesn't work.

var myevent = new Event("mouseup"); myelement.dispatchEvent(myevent);

or var myevent = new Event("touchend"); myelement.dispatchEvent(myevent);

Upvotes: 0

Views: 96

Answers (1)

Andrew
Andrew

Reputation: 1

event.stopPropagation() doesn't work. I solved it by adding event.preventDefault() inside touchend.

Upvotes: 0

Related Questions