Skip to main content

 

Design UI

 

Applies only to Mobile Apps and Reactive Web Apps

 

OutSystems

TouchEvents Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The TouchEvents pattern enables touch events on a specific widget.

    How to Create Custom Patterns with TouchEvents

    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 this string of code:

    $parameters.Evt.preventDefault();

    How to Hide a Header During a Scroll Action

    You can use the 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.

    Element Code
    var header = document.querySelector(".hearder");
    header.classList.add("hide");
    header.classList.add("header-on-scroll");
    var header = document.querySelector(".header");
    header.classList.remove("hide");
    header.classList.remove("header-on-scroll");

    Result:

    Input Parameters

    Input Name Description Default Value
    WidgetId This is the element that responds to the touch you configure. none

    Events

    Event Name Description Mandatory
    End The event is triggered after the movement event finishes. False
    Move The event is triggered after the movement starts. False
    Start The event is triggered as the touch movement starts. False

    Compatibility with other Patterns

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

    Samples

    The following sample uses the TouchEvents pattern:

    • Was this article helpful?