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

Is a persistent left border / divider only on the even-numbered items in the list?

Transform in-line elements using specific HTML attributes using CSS styling

Unable to retrieve the td value for the current row when the button inside the DIV is clicked

Disable the off-canvas sidebar when a link is clicked in Jasny Bootstrap

Guide on creating a stationary side navigation bar in HTML with Bootstrap 5 and CSS

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Enhancing the user experience by providing auto-complete suggestions while still maintaining the original form functionality

Notify when the SVG object is clicked based on its identifier

Optimizing User Addition in Python Using Selenium

Safari Mobile not rendering absolute positioning correctly

Adjusting Chart.js line graph alignment to the left

Ways to showcase multiple images that have been pre-tagged

The elements within the HTML, CSS, and Bootstrap are all clashing and

Tips for keeping the scroll position of a bootstrap table when reloading the page

Updating the style of different input elements using Angular's dynamic CSS properties

Implementing pagination in Webgrid using AJAX post method

Having no capability to manipulate CSS using jquery

Automatically integrating Nivo Lightbox into your website

The nestedSortable plugin fails to detect elements once the HTML has finished rendering

Combining Python strings