Tuesday, October 8, 2013

found jquery mobile swipe event error in jquery.mobile.1.40 alpha2

1.screenshots:

code:

pkrss.q(document).on("swipeleft swiperight", "#"+this.name, function (e) { });

error:


when some seconds delay contents can’t scroll to bottom by touch behaviors.


2.fixed:


no used swipe event in current version jquery.mobile.


3.how


search jquery.mobile.css to search "scroll" keyword and jquery.mobile.js to found "touchstart" keywords.


then only found in jquery.mobile.js line:

// also handles swipeleft, swiperight
$.event.special.swipe = {
scrollSupressionThreshold: 30, // More than this horizontal displacement, and we will suppress scrolling.

durationThreshold: 1000, // More time than this, and it isn't a swipe.

horizontalDistanceThreshold: 10, // Swipe horizontal displacement must be more than this.

verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.

start: function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;
return {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $( event.target )
};
},

stop: function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;
return {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ]
};
},

handleSwipe: function( start, stop, thisObject, origTarget ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
var direction = start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight";

triggerCustomEvent( thisObject, "swipe", $.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }) );
triggerCustomEvent( thisObject, direction,$.Event( direction, { target: origTarget, swipestart: start, swipestop: stop } ) );
return true;
}
return false;

},

setup: function() {
var thisObject = this,
$this = $( thisObject );

$this.bind( touchStartEvent, function( event ) {
var stop,
start = $.event.special.swipe.start( event ),
origTarget = event.target,
emitted = false;

function moveHandler( event ) {
if ( !start ) {
return;
}

stop = $.event.special.swipe.stop( event );
if ( !emitted ){
emitted = $.event.special.swipe.handleSwipe( start, stop, thisObject, origTarget );
}
// prevent scrolling
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
event.preventDefault();
}
}

$this.bind( touchMoveEvent, moveHandler )
.one( touchStopEvent, function() {
emitted = true;
});
});
},

teardown: function() {
$( this ).unbind( touchStartEvent ).unbind( touchMoveEvent ).unbind( touchStopEvent );
}
};

then ,you may found "event.preventDefault();" in above. i try remove this line,and it can worked ok.


4. other


when i want to search "$.event.special.swipe.scrollSupressionThreshold", i search bellow content, speed up jquerymobile code: by here

// js code:
<script>
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = false;
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = false
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.page.prototype.options.domCache = false;
$.event.special.swipe.scrollSupressionThreshold = 100;
});
$(document).bind("touchstart", function(event){})
</script>

/**** css code *****/
.ui-body-a, .ui-bar-a, .ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,
.ui-body-b,.ui-bar-b,.ui-btn-up-b,.ui-btn-hover-b,.ui-btn-down-b,
.ui-body-c,.ui-bar-c,.ui-btn-up-c,.ui-btn-hover-c,.ui-btn-down-c,
.ui-body-d,.ui-bar-d,.ui-btn-up-d,.ui-btn-hover-d,.ui-btn-down-d,
.ui-body-e,.ui-bar-e,.ui-btn-up-e,.ui-btn-hover-e,.ui-btn-down-e,
.ui-shadow-inset,
.ui-icon-shadow,
.ui-focus,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active{
text-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-transform: translateZ(0);
}





No comments: