3 Replies - 1980 Views - Last Post: 27 February 2014 - 05:41 AM

#1 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 109
  • Joined: 09-December 13

function running twice on tablets due to click/touchend

Posted 27 February 2014 - 04:32 AM

code I am using:

			$(document).on("click touchend", "#indexDatePicker-month-plus", function ( e ){
				$("#indexDatePicker-month-input").stop().animate({
					top:"-50px"
				}, 100, function (){
					var temp_month = $("#indexDatePicker-month-input").val();
					if( temp_month == 12 ){
						temp_month = 1;
					} else {
						temp_month++;
					}
					if( temp_month < 10 ){
						temp_month = '0' + temp_month;
					}
					$("#indexDatePicker-month-input").val( temp_month );
					$("#indexDatePicker-month-input").css({
						"top":"50px"
					});
					$("#indexDatePicker-month-input").stop().animate({
						top:"0px"
					}, 100);				
				});
			});



Problem is if I just use "click" the function will only run on PC, if I use "touchend/touchstart" it only works on tablets, If I use both the function runs fine (increment the month) however on tablet it seems to run it twice causing the program to skip a month..... :unsure: (this happens with code above with both user inputs)

Is there a way to make this function work both for a desktop mouse click and a tablet touch :D

Is This A Good Question/Topic? 0
  • +

Replies To: function running twice on tablets due to click/touchend

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,397
  • Joined: 12-December 12

Re: function running twice on tablets due to click/touchend

Posted 27 February 2014 - 05:03 AM

There are a number of different approaches in this SO topic, setting a flag or using a timer interval.

NB I searched "jquery touchend click".

This post has been edited by andrewsw: 27 February 2014 - 05:06 AM

Was This Post Helpful? 0
  • +
  • -

#3 typhlosion  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 109
  • Joined: 09-December 13

Re: function running twice on tablets due to click/touchend

Posted 27 February 2014 - 05:24 AM

This worked for me, although just seems very messy and hacky =/

var flag = false;


			$(document).on("click touchend", "#indexDatePicker-month-plus", function ( e ){
				if (!flag) {
					flag = true;
					setTimeout(function(){ flag = false; }, 100);
		
					$("#indexDatePicker-month-input").stop().animate({
						top:"-50px"
					}, 100, function (){
						var temp_month = $("#indexDatePicker-month-input").val();
						if( temp_month == 12 ){
							temp_month = 1;
						} else {
							temp_month++;
						}
						if( temp_month < 10 ){
							temp_month = '0' + temp_month;
						}
						$("#indexDatePicker-month-input").val( temp_month );
						$("#indexDatePicker-month-input").css({
							"top":"50px"
						});
						$("#indexDatePicker-month-input").stop().animate({
							top:"0px"
						}, 100);				
					});
				}
				return false;
			});


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,397
  • Joined: 12-December 12

Re: function running twice on tablets due to click/touchend

Posted 27 February 2014 - 05:41 AM

Another suggested solution was to use jQuery fastClick.

I think that this will continue to be problematic as tablets adapt, or adopt, desktop behaviours. Desktop screens with touch :whatsthat: only make matters worse.

This post has been edited by andrewsw: 27 February 2014 - 05:43 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1