Click Event/Active Areas not working properly with touch screens

Asked by Aliaa
6 years ago.

Hi there,

I have posted a question before (https://forums.daypilot.org/question/4422/display-context-menu-on-touch-device-tap) about trying to display the context menu when clicking on an active area inside an event using a touch device. I still couldn't solve this problem. But with more investigation, I think the problem is that the click event itself doesn't fire if I click on any element inside an event unless I click 3 or 4 times rapidly. This scenario only occurs on touch screens or in google chrome when I enable the touch device toolbar from the developers tools.

You can reproduce this issue using daypilot online demo (https://javascript.daypilot.org/demo/scheduler/eventareas.html) by enabling the touch screen tool bar in chrome. Then try to click on any event, the "info" active area won't appear. Note that you need to enable the touch screen tool bar first then load the page.

bug javascript

Answer posted by Dan Letecky [DayPilot]
6 years ago.

On touch devices, the active areas with visibility: "Hover" won't be displayed as there is no hover event. In some edge cases, the mobile browsers will fire mousemove event which is used to detect the hover but that is an exception.

I recommend setting the active area visibility to "Visible" or "TouchVisible". See also:
https://api.daypilot.org/daypilot-area-properties/

Comment posted by Aliaa
6 years ago.

Hi Dan,

This might explain the issue with the online demo but still doesn't explain the issue I am having. I already have the area's visibility set to "Visible". And not only the active areas are causing the issue, any element inside the event won't fire the click event on a touch screen tap unless tapped 3 or 4 times rapidly.

Comment posted by Dan Letecky [DayPilot]
6 years ago.

The default action type ("Default" or undefined) lets the event go through to the underlying object (e.g. an event) and the touch start/end are not handled explicitly. If you want to fire onClick for touchstart you need to specify action: "None". That will fire onClick on touch start and cancel the event bubbling. You can also use other action types to invoke a specific action (e.g. "ContextMenu').

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.