0
我正在寫一個應用程序使用骨幹,並已達到一個完整的關卡,並且似乎無法找到touchend事件正在第二次touchstart被解僱。如何停止touchend事件觸發與骨幹touchghart
我第一次點擊'.slider'div一切正常。然而,當我第二次觸摸屏幕來移動幻燈片時,它會立即觸發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>
我有一種感覺這可能與我如何附加事件有關,但無法找到關於在事件中附加事件的任何信息使用主幹。
你好,我有同樣的問題。你是如何解決它的?你是否必須刪除警報? – alemangui
只需移除警報即可解決問題。這是有道理的,因爲iphone將觸摸警報作爲有效事件觸摸事件。 – darylhedley