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

13 Sep, 2021
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 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:  
HTML
<html> <head>    <title>Touchstart</title></head> <body>    <h1>TouchStart and Click event</h1>    <button id="button">click me</button>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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
 
 
ruhelaa48
JavaScript-Misc
jQuery-Misc
Picked
JQuery
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
jQuery | change() with Examples
jQuery | removeAttr() with Examples
How to reset a form using jQuery with .reset() method?
How to change the background color of the active nav-item?