TouchEvents Pattern
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.
![]() |
var header = document.querySelector(".header"); 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: