TouchEvents Pattern
The TouchEvents pattern enables touch events on a specific widget.
How to Use the TouchEvents Pattern
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(".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:
