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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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 trigerred"); 
            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 trigerred"); 
            ev.preventDefault();
            console.log("After triggering an event");
        }
    </script>
</body>
  
</html>

chevron_right


Output when a touchstart event is triggerrd



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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

click event is triggered
After triggering an event




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.