如何使用骨干网停止touchstart事件在touchstart上的触发 [英] How to stop the touchend event firing on touchstart with backbone

问题描述

我正在使用骨干程序编写应用程序，已经完全陷入僵局，似乎无法发现第二次在touchstart上触发了touchend事件.

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.

我第一次点击'.slider'div时，一切正常.但是，第二次我触摸屏幕以移动幻灯片时，它立即触发了touchend功能-而不是等到touchend事件发生.是否有处理触摸事件和主干的特殊方法?

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?

这是我的查看代码:

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.

推荐答案

解决了我自己的问题... whooo！原来是在touchend事件上触发警报会导致在单击确定"按钮时调用另一个touchstart事件.仅在iPhone和iPad上...很奇怪.

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.

这篇关于如何使用骨干网停止touchstart事件在touchstart上的触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！