touchend

16 March, 2023

Contributors

Milsaware

@milsaware

About

The touchend event is a touch event that is fired when a touch point is removed from the touch surface, which can be the screen of a mobile device or a touchpad on a laptop. This event is fired on the same element on which the touchstart event occurred, and is useful for detecting the end of a touch interaction.

The touchend event can provide information about the touch interaction, such as the coordinates of the touch point, the time when the touch interaction ended, and whether other touch points are still active.

You can use event listeners in JavaScript to listen for the touchend event on an HTML element, and execute code in response to the event. For example, you can use the touchend event to implement touch-based interactions on your application, such as swipe gestures or taps.

Event listener

Here is an example of how to use an event listener to detect the touchend event on an HTML element:

HTML

<div id="touch-div" style="width: 200px; height: 200px; background-color: red;"></div>

JavaScript

const touchDiv = document.getElementById("touch-div");

// Add an event listener for the touchend event
touchDiv.addEventListener("touchend", function(event) {
    // Handle the touchend event
    console.log("Touch ended at coordinates (" + event.changedTouches[0].clientX + ", " + event.changedTouches[0].clientY + ")");
});

Here, we have an HTML div element with an id of touch-div, and we use JavaScript to add an event listener for the touchend event on this element. The event listener function is executed whenever the touchend event is fired on the touch-div element.

In the event listener function, we use the console.log() method to output the coordinates of the touch point where the touch interaction ended, which is accessed through the changedTouches property of the event object.

Property

Here's an example of using the ontouchend property to attach a touchend event listener to an element:

const element = document.getElementById("myElement");
element.ontouchend = function(event) {
    console.log("Touch ended at (" + event.pageX + ", " + event.pageY + ")");
};

Here, the ontouchend property is used to attach a touchend event listener to an HTML element with the id of myElement. When the touchend event is fired on the element, the function assigned to ontouchend is called, which logs the coordinates of the touchend event to the console.

Inline

Here's an example of using the ontouchend attribute inline in HTML:

<button ontouchend="alert('Button was touched!')">Touch me!</button>

Here, a button element is used and the ontouchend event listener is added directly to the element's HTML using the inline ontouchend attribute. When the user touches the button on a touch-enabled device and then releases their finger, the alert function is called, displaying a message that says "Button was touched!".

Inline event listeners can be convenient for simple interactions, but it's generally considered better practice to use the addEventListener method to attach event listeners via JavaScript, as this separates the behaviour from the markup and allows for more flexibility in code organisation and maintenance.

Programmatic trigger

There is no touchend() method to trigger the touchend event programmatically. However, you can use the dispatchEvent() method to create and dispatch a new TouchEvent object with the appropriate event properties to simulate a touchend event:

const button = document.getElementById('myButton');
const touchEndEvent = new TouchEvent('touchend', { touches: [], targetTouches: [], changedTouches: [] });
button.dispatchEvent(touchEndEvent);

Here, we first retrieve a reference to the button element with the ID myButton. We then create a new TouchEvent object using the TouchEvent constructor and passing in an empty array of touches, targetTouches, and changedTouches. Finally, we dispatch the touchEndEvent to the button element using the dispatchEvent method.

Note that if you want to simulate a touch event with specific touch points, you'll need to populate the touches, targetTouches, and changedTouches arrays with Touch objects that have the appropriate coordinates and other properties.

javascript

touchevents