JQuery Mobile + Backbone tap event fires twice

Question

Here, where I define the event in my opinion:

events : { "tap #exerciseProgressBarContainer" : 'progressBarClick' }, 

And here is the action:

  progressBarClick : function() { // start? if(this.curWorkoutExercise.isTimed() && !this.curExerciseStartTime) { HTMLHelper.endGlow(this.$('#exerciseProgressBarContainer .progressBar.overlay')); this.startExerciseProgressTimer(); } // done? else { this.stopExerciseProgressTimer(); // save the log this.addCurExerciseLog(); this.startBreak(); this.nextAction(); } }, 

Basically, the first time the user starts the run timer, and after it starts, another tap ends it. What happens on my iPhone and my Android is a tap event that fires twice , simultaneously starting and stopping the progress bar. Any ideas why this is happening and how to fix it? Note. I already tried replacing tap with vclick .

Thanks a lot!

Answer 1

I ended up stopping the event using e.stopPropagation() as well as e.preventDefault()

Answer 2

Why not use the touchhend event?

Btw. It is a good idea when your script does not work when starting at run time, to make sure that it cannot be run at run time. What if someone inserts it twice because of impatience?

In some situations, you can use the jquery.one () function to do this. In most situations, you need more flexibility, and you can solve it with a simple variable check.