Identify contextual events that result from a touch action?

Question

I have an application in which elements inside an SVG element can be dragged (thanks to d3-drag and d3-zoom , see https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084 as an example for such a page), which can also be used on devices with a touch screen, but what happens is that after a long press the context menu appears (at least in IE11, Edge and Firefox) and interferes, so I want to prevent the context menu from appearing in this case.

I could simply prevent the context menu from displaying altogether by processing the contextmenu event and executing the .preventDefault() of the event object, but I wonder if there is a solution where the context menu is simply blocked from showing in the touch case and it will still be displayed, for example, by clicking right-click or when you press the menu key when the item has focus.

At first it seemed to me that I could look at the .button and .buttons properties of the event object, but it seems that these values ​​are arbitrary 0 or 2 , and it looks like they can be found in any combination when testing in different browsers on different systems.

The item already has touch-action: none .

Is there any working way for the context menu to simply not be displayed as a result of pressing, long pressing?

It seems that .preventDefault() in the corresponding touch events will not be an option.

Answer 1

jQuery UI Touch Punch just solves everything.

Touch Event support for jQuery UI. Basically, it just passes the touch event back to the jQuery UI. Tested on iPad, iPhone, Android and other touch screen mobile devices. I used jQuery UI sortable and it works like a charm.

http://touchpunch.furf.com/