# Unintuitive touch events

**URL:** <https://community.cesium.com/t/unintuitive-touch-events/6383>\
**Category:** CesiumJS\
**Created:** [December 18, 2017, 7:45pm UTC](https://community.cesium.com/t/unintuitive-touch-events/6383 "2017-12-18T19:45:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harry\_Nicholls](https://avatars.discourse-cdn.com/v4/letter/h/51bf81/32.png) [@Harry\_Nicholls](https://community.cesium.com/u/Harry_Nicholls)\
**Post date:** [December 18, 2017, 7:45pm UTC](https://community.cesium.com/t/unintuitive-touch-events/6383/1 "2017-12-18T19:45:29Z")

</div>

I’ve been testing touch events recently, and I noticed that after a pinch-zoom event, a left click is sometimes triggered. After further investigation I discovered that events are triggered in the following sequence over the course of a pinch-zoom event:

1. First touch on the screen - triggers left down event
2. Second touch on the screen - triggers left up event (_what?!)_
3. One touch removed from the screen - triggers left down event (_why?! why?! WHY?!)_
4. Remaining touch removed from the screen - triggers left up event  
I’ve looked through the source code, and I understand what’s going on… but why?! It’s unintuitive.

I’m using this for a mapping tool that allows users to draw waypoints on a map. During drawing, if the user pinch-zooms into the map then a point may or may not be drawn in an undesirable place. I had to write a workaround in my code to prevent the left click occurring.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [December 19, 2017, 8:48pm UTC](https://community.cesium.com/t/unintuitive-touch-events/6383/2 "2017-12-19T20:48:07Z")

</div>

Hi Harry,

There’s a thread that discusses the rationale behind the events [here](https://groups.google.com/forum/#!searchin/cesium-dev/touch%2420event%7Csort:date/cesium-dev/Hnvlorpqej8/geZyK_5CCgAJ).

For your purposes, it’s possible to bypass the ScreenSpaceEvents in Cesium and listen for the touch/click events from the browser directly.

Thanks,

Gabby

---

<div class="post-metadata">

**Author:** ![Harry\_Nicholls](https://avatars.discourse-cdn.com/v4/letter/h/51bf81/32.png) [@Harry\_Nicholls](https://community.cesium.com/u/Harry_Nicholls)\
**Post date:** [December 20, 2017, 5:27pm UTC](https://community.cesium.com/t/unintuitive-touch-events/6383/3 "2017-12-20T17:27:33Z")

</div>

Hi Gabby,

Thanks for the link.

I’m doing this to bypass the ScreenSpaceEvents:

let pinchEnded = true;

const touchInfo: Array\<{

touchId: number;

startPosition: { x: number; y: number };

}\> = ;

const ngTouchstartHandler = renderer.listen(

this.mainMapViewer.canvas,

“touchstart”,

e =\> {

pinchEnded = e.touches.length \<= 1;

// Capture touch info for every changed touch point on the screen

for (let i = 0; i \< e.changedTouches.length; i++) {

const changedTouch = e.changedTouches.item(i);

touchInfo.push({

startPosition: {

x: changedTouch.clientX,

y: changedTouch.clientY

},

touchId: changedTouch.identifier

});

}

}

);

const ngTouchendHandler = renderer.listen(

this.mainMapViewer.canvas,

“touchend”,

e =\> {

// If all touches have been removed from the screen…

if (e.touches.length === 0) {

// …then check to see how far the changed touches had been moved before being removed from the screen

for (let i = 0; i \< e.changedTouches.length; i++) {

const changedTouch = e.changedTouches.item(i);

const startPosition = \_.find(

touchInfo,

x =\> x.touchId === changedTouch.identifier

).startPosition;

const endPosition = {

x: changedTouch.clientX,

y: changedTouch.clientY

};

const xDiff = startPosition.x - endPosition.x;

const yDiff = startPosition.y - endPosition.y;

const totalPixels = Math.sqrt(xDiff \* xDiff + yDiff \* yDiff);

// If the touches have moved a distance less than the tolerance then a LEFT\_CLICK event will be fired

if (totalPixels \< this.cesiumClickPixelTolerance) {

// So set this variable to false to prevent stuff being done in the LEFT\_CLICK handler

pinchEnded = false;

}

}

}

}

);

cesiumClickHandler.setInputAction(click =\> {

if (pinchEnded) {

```
   // Do stuff...

```

}

pinchEnded = pinchEnded || true;

}, Cesium.ScreenSpaceEventType.LEFT\_CLICK);

It works pretty well.

Thanks,

Harry

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [December 21, 2017, 4:20pm UTC](https://community.cesium.com/t/unintuitive-touch-events/6383/4 "2017-12-21T16:20:08Z")

</div>

Glad you got the events working for your purposes! Also thanks for the update with the code example!