Open In App

How to bind ‘touchstart’ and ‘click’ events but not respond to both ?

Improve
Improve
Like Article
Like
Save
Share
Report

The touchstart event occurs when the user touches an element. But a click event is fired when the user clicks an element. 
Usually, both the touchstart and click events are fired in the very same click in the touch and click enabled devices. So, in this case, if the browser fires both touch and mouse events because of single user input, the browser must fire a touchstart before any mouse events. 
There are two popular ways of solving this issue. 
 

  • Use of the preventDefault() or stopPropagation() method.
  • Using a variable to check whether it is a “touchstart” or a “click” event.

Use of the preventDefault() or stopPropagation() method: This method prevents the event handler from responding to both touchstart and clicks events. If an application does not want mouse events fired on a specific touch target element, the element’s touch event handlers should call preventDefault() or stopPropagation() and no additional mouse events will be dispatched.
Example: 
 

HTML




<html>
 
<head>
    <title>Touchstart</title>
</head>
 
<body>
    <h1>TouchStart and Click event</h1>
    <button id="button">click me</button>
    <script>
       
        // button element
        var button1 = document.querySelector("button");
       
       
        // touchstart handler
        button1.addEventListener("touchStart", onlyTouch, false);
 
        function onlyTouch(ev) {
           
            // Call preventDefault() to prevent any further handling
            console.log("Here a touchstart event is triggered");
            ev.preventDefault();
        }
 
        // click event handler
        button1.addEventListener("click", onlyClick, false);
 
        function onlyClick(ev) {
 
            // Call preventDefault() to prevent any further handling
            console.log("Here a click event is triggered");
            ev.preventDefault();
            console.log("After triggering an event");
        }
    </script>
</body>
 
</html>


Output when a touchstart event is triggered 
 

Here a touchstart event is triggered
After triggering an event

 

However, this also prevents other default browser behavior (like scrolling) – although usually you’re handling the touch event entirely in your handler, and you have to disable the default actions. 
Also, when a user taps on an element in a web page on a mobile device, pages that haven’t been designed for mobile interaction have a delay of at least 300 milliseconds between the touchstart event and the processing of mouse events (mousedown). So, a line of HTML code has to be added depicting that the page doesn’t need zooming.
 

<meta name="viewport" content="width=device-width, user-scalable=no">

Using a variable to check whether it is a “touchstart” or a “click” event:
Example: 
 

HTML




<html>
 
<head>
    <title>Touchstart</title>
</head>
 
<body>
    <h1>TouchStart and Click event</h1>
    <button id="button">click me</button>
    <script src=
    </script>
 
    <script>
        $("#button").on('touchstart click', function(event) {
            if (event.type == "touchstart") {
                $(this).off('click');
                console.log("Only touch event is fired");
            } else if (event.type == "click") {
                $(this).off('touchstart');
                console.log("Only click event is fired");
            }
        });
    </script>
</body>
 
</html>


Output: 
 

click event is triggered
After triggering an event

 

 



Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads