How to stop the touchend event firing on touchstart with backbone

问题

I am writing an app using backbone and have got to a complete sticking point and cannot seem to find out with the touchend event is being fired on the touchstart the second time around.

The first time I tap the '.slider' div everything works well. However the second time I touch the screen to move slides it fires the touchend function straight away - instead of waiting until the touchend event. Is there a special way of dealing with touch events and backbone?

Here is my view code:

navigateTouch :function (event) {
    event.preventDefault();
    var xOrigPos = event.originalEvent.touches[0].pageX;
    var startPos = parseInt($('.slider', this.$el).css('margin-left'));
    var xPos = event.originalEvent.touches[0].pageX;
    var move;
    var stage = this.model.get('stage');
    var extraMargin = parseInt($('.graphic', this.$el).css('margin-right'));
    var movementSize = $('.slide', this.$el).width()+extraMargin;
    var narrativeSize = $('.graphic', this.$el).length;
    $('.slider', this.$el).on('touchmove', function (event) {
        event.preventDefault();
        xPos = event.originalEvent.touches[0].pageX;
        move = (xPos + startPos) - (xOrigPos);
        $('.slider', this.$el).css('margin-left', move);
    });
    $('.slider', this.$el).one('touchend', function (event) {
        alert('fires')
        event.preventDefault();
        $('.slider', this.$el).unbind('touchmove');
        if (xPos < xOrigPos) {
            stage ++;
            $('.slider', this.$el).animate({'margin-left': -(movementSize*stage)});    
        }
        if (xPos > xOrigPos) {
            stage --;
            $('.slider', this.$el).animate({'margin-left': -(movementSize*stage)})
        }
        this.model.set({'stage':stage});
        $('.progress', this.$el).removeClass('selected').eq(stage).addClass('selected');

    });
}

my view has this in the events:

events: {
    'click .controls':'navigateClick',
    'click .progress':'navigateProgress',
    'touchstart .slider':'navigateTouch'
}

and my template renders out this:

<div class="slide">
     <a href="#" class="button controls left">
     </a>
     <a href="#" class="button controls right">
     </a>
     <div class="slider clearfix">
          {{#each graphic}}
          <div class="graphic">
               <img src="{{image}}" alt="{{alt}}" title="{{graphicTitle}}"/>
          </div>
          {{/each}}
     </div>
     <div class="indicators">
        {{#each graphic}}
        <a href="#" class="button progress"></a>
        {{/each}}
    </div>
</div>

I have a feeling it may be something to do with how I am attaching the events but cannot find anything about attaching events inside of an event using backbone.

回答1:

Solved my own question...whooo!turns out firing an alert on the touchend event causes another touchstart event to be called when the 'ok' button is clicked. Only on iPhones and iPads...weird.

来源：https://stackoverflow.com/questions/14090186/how-to-stop-the-touchend-event-firing-on-touchstart-with-backbone

标签

javascript

backbone.js

views

touch