Touch events

For any view, you can define custom event handlers which will catch native touch events.

Supported touch events

  • onSwipeX - invoked when the device detects a horizantal swipe against the view. If a component has scroll in horizontal direction - the event won't be generated for such the gesture.
  • onSwipeY - invoked when the device detects a vertical swipe against the view. If a component has scroll in vertical direction - the event won't be generated for such the gesture.
  • onLongTouch - invoked when a user touches and holds the item.
    To set the 'long touch' delay (after this time period is passed the touch is defined as long) you should use the following:
    dhx.Touch.longTouchDelay = 1000; //time in milliseconds
  • onTouchStart - invoked when the device detects any gesture.
  • onTouchEnd - invoked when a touch event is completed.
  • onTouchMove - invoked when the device detects a movement of a touch.
$$('component_id').attachEvent("onSwipeY", function(start_event, end_event){
   //this  == your component
});

Handler function

The handler function for any mentioned event takes 2 parameters:

  • start_event - the start context of touch action.
  • end_event - the current context of touch action.

Event properties

The event object contains the next properties:

  • x - the x position of the event.
  • y - the y position of the event.
  • time - the timestamp of the event.
  • target - the html node for which the event is fired.
$$('component_id').attachEvent("onSwipeX", function(start_event, end_event){
     var direction = start_event.x > end_event.x;
     do_some();
});