Skip to main content




Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:

Touch Events

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Touch Events UI Pattern to enable touch events on a specific widget.

    How to create custom patterns using the Touch Events UI Pattern

    You can call the event.preventDefault() to prevent the default action associated with each event from occurring. The touchstart and touchend events don't need this action, but touchmove requires it to stop screen scrolling when the user is moving the finger inside the element.

    To use the event.preventDefault(), use the following string of code:


    How to hide a header during a scroll action

    You can use the Touch Events UI pattern to hide a header during a scroll action.

    1. Add the TouchEvents pattern to the Layout block.

    2. Add an End event.

    3. Add logic.

    After following these steps and publishing the module, you can test the pattern in your app.

    Element Code
    var header = document.querySelector(".header");
    var header = document.querySelector(".header");



    Property Description
    WidgetId This is the element that responds to the touch you configure.

    Compatibility with other patterns

    There might be conflicts with any pattern with touch events (unless the code is altered to expect this behavior).


    The following sample uses the Touch Events pattern:

    • Was this article helpful?