Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-28 19:50:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved tap event and added a quick event logger page so we can get these neglected events in order.

Browse source
This commit is contained in:
scottjehl 2011-01-23 19:34:17 -05:00
parent 2e6a396278
commit 977e075ece
2 changed files with 68 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
js/jquery.mobile.event.js
View file

@ -63,21 +63,37 @@ $.event.special.tap = {
$this = $( thisObject );
$this
.bind( touchStartEvent, function( event ) {
if ( event.which && event.which !== 1 ) {
return;
.bind( "mousedown touchstart", function( event ) {
if ( event.which && event.which !== 1 ||
//check if event fired once already by a device that fires both mousedown and touchstart (while supporting both events)
$this.data( "prevEvent") && $this.data( "prevEvent") !== event.type ) {
return false;
}
//save event type so only this type is let through for a temp duration,
//allowing quick repetitive taps but not duplicative events
$this.data( "prevEvent", event.type );
setTimeout(function(){
$this.removeData( "prevEvent" );
}, 800);
var moved = false,
touching = true,
origTarget = event.target,
origPos = [ event.pageX, event.pageY ],
origEvent = event.originalEvent,
origPos = event.type == "touchstart" ? [origEvent.touches[0].pageX, origEvent.touches[0].pageY] : [ event.pageX, event.pageY ],
originalType,
timer;
function moveHandler() {
if ((Math.abs(origPos[0] - event.pageX) > 10) ||
(Math.abs(origPos[1] - event.pageY) > 10)) {
function moveHandler( event ) {
if( event.type == "scroll" ){
moved = true;
return;
}
var newPageXY = event.type == "touchmove" ? event.originalEvent.touches[0] : event;
if ((Math.abs(origPos[0] - newPageXY.pageX) > 10) ||
(Math.abs(origPos[1] - newPageXY.pageY) > 10)) {
moved = true;
}
}
@ -91,17 +107,21 @@ $.event.special.tap = {
}
}, 750 );
//scroll now cancels tap
$(window).one("scroll", moveHandler);
$this
.one( touchMoveEvent, moveHandler)
.one( touchStopEvent, function( event ) {
$this.unbind( touchMoveEvent, moveHandler );
.bind( "mousemove touchmove", moveHandler )
.one( "mouseup touchend", function( event ) {
$this.unbind( "mousemove touchmove", moveHandler );
$(window).unbind("scroll", moveHandler);
clearTimeout( timer );
touching = false;
/* ONLY trigger a 'tap' event if the start target is
* the same as the stop target.
*/
if ( !moved && (origTarget == event.target)) {
if ( !moved && ( origTarget == event.target ) ) {
originalType = event.type;
event.type = "tap";
$.event.handle.call( thisObject, event );

37
tests/functional/eventlogger.html Executable file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile: Event Logger</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
<script>
$( document )
.bind("tap taphold swipe swipeleft swiperight scrollstart scrollstop orientationchange",function( e ){
$("#log")
.prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
.listview("refresh");
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1>Event Logger</h1>
</div>
<div data-role="content">
<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
<ul data-role="listview" id="log">
</ul>
</div>
</div>
</body>
</html>