0

私はバックボーンを使用してアプリを作成していますが、完全な問題点に達しており、タッチスタートで touchend イベントが 2 回目に発生していることがわからないようです。

「.slider」divを初めてタップすると、すべてうまくいきます。ただし、2回目に画面に触れてスライドを移動すると、 touchend イベントまで待つのではなく、すぐに touchend 関数が起動します。タッチ イベントとバックボーンを処理する特別な方法はありますか?

ここに私のビューコードがあります:

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');

    });
}

私の見解はイベントでこれを持っています:

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

私のテンプレートはこれをレンダリングします：

<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>

イベントの添付方法に関係があるのではないかと感じていますが、バックボーンを使用してイベント内にイベントを添付することについては何も見つかりません。

4

1 に答える 1

2

私自身の質問を解決しました...おっと! touchend イベントでアラートを発生させると、「ok」ボタンがクリックされたときに別の touchstart イベントが呼び出されることが判明しました。iPhone と iPad のみで...奇妙です。

于 2012-12-30T21:52:41.477 に答える