Question

Here’s where I define the event in my view:

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, on the first tap, the user starts the progress timer, and after it’s started, another tap finishes it. What’s happening on my iPhone and my Android is the tap event fires twice, making the start and stop of the progress bar simultaneous. Any ideas why this is happening and how to fix it? Note: I’ve already tried swapping tap with vclick.

Thanks a lot!

Answer 1

I ended up stopping the event propagation using
e.stopPropagation()
and
e.preventDefault()