How do I create different event behaviors for touch/click

Asked by Vincent
2 years ago.

I am trying to see if I can get the grid to work in the following way:

When touched using a touch pad/screen, an event would create a context menu.

When left clicked using a mouse, an event would be selected or launch some other code to load up this event.

When right clicked using a mouse, an event would create a context menu.

Is there a way to differentiate between a touch or a click in the click event, without also breaking the existing drag/drop behavior?

how-to javascript

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

In the onEventClick and onEventClicked events, you can access the original event as args.originalEvent.

Using the original event object, you can check if the source was a touch event:

onEventClick: (args) => {
  const touch = !!args.originalEvent.changedTouches;
  // ...
},

Comment posted by Vincent
2 years ago.

I’m having some difficulties displaying the menu on touch. inside my touch handling, I am trying to show my menu using the show command and it does not seem to work. Is there something I am doing wrong?

var menuA = new DayPilot.Menu({
  //menu items here
});

dp.onEventClick = function(args) {
   if (!!args.originalEvent.changedTouches) {
      menuA.show(args.e);
   }
   else { 
       //do something else
   }
};

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