How can I use ontouchstart and ontouchend events in jQuery?

Question

How can I use ontouchstart and ontouchend events in jQuery?

Currently, I am using the following code to change the class of elements on touch:

ontouchstart="$(this).addClass('select');" ontouchend="$(this).removeClass('select');"

I was wondering if there is a more efficient way to achieve this functionality:

$("#element").touchstart(function(){
    $(this).addClass('select');
},
function(){
   $(this).removeClass('select');
});

This would allow me to specify multiple elements that should have this behavior. I've attempted different approaches but haven't been successful in making it work.

jquery css html touch

Answer 1

Answer №1

In the end, I simply employed the following code:

$('.menu li').on('touchstart', function(){
    $(this).toggleClass('highlight');
}).on('touchend', function(){
    $(this).removeClass('highlight');
});

Answer 2

In the end, I simply employed the following code:

$('.menu li').on('touchstart', function(){
    $(this).toggleClass('highlight');
}).on('touchend', function(){
    $(this).removeClass('highlight');
});

Answer 3

Answer №2

When using vanilla JavaScript :

element.addEventListener('touchstart', function(e) {
    e.currentTarget.className = "selected";
});

However, with the use of JQUERY :

$('#navbar ul li a').on('touchstart', function(){
    $(this).addClass('selected');
});

In fact, the on() method provides better performance compared to bind(). More details can be found in the official documentation

Answer 4

When using vanilla JavaScript :

element.addEventListener('touchstart', function(e) {
    e.currentTarget.className = "selected";
});

However, with the use of JQUERY :

$('#navbar ul li a').on('touchstart', function(){
    $(this).addClass('selected');
});

In fact, the on() method provides better performance compared to bind(). More details can be found in the official documentation

Answer 5

Answer №3

Consider incorporating jQuery Mobile into your project. It provides normalized events that may align with your requirements. Refer to jQuery Mobile's API reference for a comprehensive list of special events: checkout this link.

Pay attention to the following events:

vmousedown

Standardized event for managing touchstart or mousedown events

vmousemove

Standardized event for managing touchmove or mousemove events

vmouseup

Standardized event for managing touchend or mouseup events

Answer 6

Consider incorporating jQuery Mobile into your project. It provides normalized events that may align with your requirements. Refer to jQuery Mobile's API reference for a comprehensive list of special events: checkout this link.

Pay attention to the following events:

vmousedown

Standardized event for managing touchstart or mousedown events

vmousemove

Standardized event for managing touchmove or mousemove events

vmouseup

Standardized event for managing touchend or mouseup events

Answer 7

Answer №4

Have you considered implementing the :hover pseudo-class instead? It appears that this modification to the CSS regulations of the nav_li component is only temporary.

Answer 8

Have you considered implementing the :hover pseudo-class instead? It appears that this modification to the CSS regulations of the nav_li component is only temporary.

How can I use ontouchstart and ontouchend events in jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Parsing HTML code using PHP's DOM parser for iteration

Cross domain Ajax POST requests using CodeIgniter and AjaxBy utilizing CodeIgn

conceal specific language options within the dropdown selection box

New design for UI grid: eliminate sorting menu and right-align column headers

What sets apart auto, 0, and no z-index values?

A step-by-step guide on setting up a confirmation pop-up message using Gravity Forms

In Internet Explorer 7, a newline within a <pre> tag may cause display issues

Issues encountered while utilizing the jQuery function $.ajax()

Accessing Flipkart API using CORS: A step-by-step guide

JavaScript's onclick function for clearing dropdown fields will only work once for each specific dropdown field

"Maximizing the power of Jquery's .each function. What

Simply close by clicking outside using basic vanilla JavaScript

Text Parallax Effect

The sticky navigation bar becomes fixed at the top prematurely

Material UI - Clear all designs from the slate

Implementing event handling with .On() in Jquery following .Off()

Selectize Fails to Populate Options Using Ajax

Dynamic Data Visualization using ChartJS with MySQL and PHP

What causes the container's height to remain unchanged despite changes in the height of its image content?

How can jQuery input be incorporated in a form submission?