javascript - jQuery click function slow (lagging) on mobile - Stack Overflow

admin管理员组

文章数量:1425031

So i have this click function that toggles a dropdown-menu, but on Smartphones this is slow and not smooth.

Is there any other way to make this dropdown work with a smooth transition on any mobile device using jQuery?

(I've heard about "vclick" but couldn't find out how to make this work.

$j('.dropdown-menu').click(function() {
$j('.dropdown-menu').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideDown("slow");
});


$j('.dropdown-menu').blur(function() {
$j('.dropdown-inside').hide('slow', function() {
});
});

So i have this click function that toggles a dropdown-menu, but on Smartphones this is slow and not smooth.

Is there any other way to make this dropdown work with a smooth transition on any mobile device using jQuery?

(I've heard about "vclick" but couldn't find out how to make this work.

$j('.dropdown-menu').click(function() {
$j('.dropdown-menu').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideDown("slow");
});


$j('.dropdown-menu').blur(function() {
$j('.dropdown-inside').hide('slow', function() {
});
});

• javascript
• jquery
• mobile

Share Improve this question Follow edited Jul 6, 2014 at 18:55 Omar 31.7k99 gold badges7272 silver badges116116 bronze badges asked Jul 6, 2014 at 17:23 user3332274user3332274 20911 gold badge44 silver badges1212 bronze badges 1

• vclick is a custom event only available in JQM framework. – Omar Commented Jul 6, 2014 at 18:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try the click on Id rather then class. Class is always slow. So suppose if your dropdown has id like 'myDropdown' then do it like

$j('#myDropdown').click(function(){
    //your code here
});

The first part can be simplified to this:

$j('.dropdown-menu').click(function() {
    $j('.dropdown-menu').not(this).children('ul').slideToggle(2000);
});

Also, try wrapping the hidden content in a div and giving it a width. When you click on the div, it actually pulls it out of position to measure it before quickly replacing it because JQuery doesn't know the dimensions of your hidden div until it's displayed. So . This could make the whole animation laggy!

Another suggestion:

ID is faster than class. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.

If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.

Credits

Cause
According to Google :
...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

Solution
1. Use fastclick.js to get rid of this 300ms lag
https://github./ftlabs/fastclick
2. Use application cache to speed up the load
https://developer.mozilla/en-US/docs/Web/HTML/Using_the_application_cache

本文标签： javascriptjQuery click function slow (lagging) on mobileStack Overflow