Skip to content

Commit

Permalink
fixed#70 2 things have been changed. Firstly, a bug was found where t…
Browse files Browse the repository at this point in the history
…riggerOnTouchEnd=false would prevent the click callback from firing, and secondly, with the addition of event triggering and conflict with the native click occured. So now the click event has been replaced by a tap event. For backwards compatibility the click handler will still work, but you cannot bind / on using click, you will have to use the new name tap.
  • Loading branch information
Matt Bryson committed Mar 14, 2013
1 parent 42cdaf5 commit f226567
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 15 deletions.
22 changes: 14 additions & 8 deletions demos/Click_vs_swipe.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@

<script id='code_1'>
$(function() {
var clickCount=0;
var tapCount=0;
var swipeCount=0;
var blackCount=0;

//Enable swiping...
$("#test").swipe( {
click:function(event, target) {
clickCount++;
$("#textText").html("You clicked " + clickCount +" times on " + $(target).attr("id"));
tap:function(event, target) {
tapCount++;
$("#textText").html("You clicked " + tapCount +" times on " + $(target).attr("id"));
},
swipe:function() {
swipeCount++;
Expand All @@ -51,20 +51,26 @@
</script>

<span class='title'></span>
<h4>events: <code>click</code>, <code>swipe</code></h4>
<p>You can also detect if the user simply clicks and does not swipe with the <code>click</code> handler<br/><br/>
The <code>click</code> handler is passed the original event object and the target that was clicked.
<h4>events: <code>tap</code>, <code>swipe</code></h4>
<p>You can also detect if the user simply clicks and does not swipe with the <code>tap</code> handler<br/><br/>
The <code>tap</code> handler is passed the original event object and the target that was clicked.
<br/><br/>
If you use the jquery.ui.ipad.js plugin (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) you can then also pickup
standard jQuery mouse events on children of the touchSwipe object.</p>

<p><code>tap</code> replaces the old <code>click</code> handler for naming consistency. Since the introduction of event
triggering as well as callbacks, the plugin cannot trigger a <code>click</code> event as it clashes with the jQ click event,
so both the event and callback are called <code>tap</code>. For backwards compatibility, the <code>click</code> callback will still work
but there is no click event. You must use the <code>tap</code> event when binding with <code>on</code> or <code>bind</code></p>


<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
<pre class="prettyprint lang-js" data-src='code_1'></pre>
<span class='navigation'></span>

<div id="test" class="box">
<div id="textText">Swipe or Click me</div><br/>
<div id="a_div" class="box" style="width:150px;height:50px;background:#666"><h3>Im just a child div</h3></div>
<div id="a_div" class="box" style="width:150px;height:50px;background:#666"><h3 id='a_div_text'>Im just a child div</h3></div>
<div id="another_div" class="box" style="width:200px;height:100px;background:#000"><h3>Im a child div with my own jQuery click handler</h3></div>
</div>

Expand Down
20 changes: 14 additions & 6 deletions jquery.touchSwipe.js
Original file line number Diff line number Diff line change
Expand Up @@ -306,17 +306,17 @@
options.allowPageScroll = NONE;
}

//Check for deprecated options
//Check for deprecated options
//Ensure that any old click handlers are assigned to the new tap, unless we have a tap
if(options.click!==null && options.tap===null) {
if(options.click!==undefined && options.tap===undefined) {
options.tap = options.click;
}

if (!options) {
options = {};
}

//pass empty object so we dont modify the defaults
//pass empty object so we dont modify the defaults
options = $.extend({}, $.fn.swipe.defaults, options);

//For each element instantiate the plugin
Expand Down Expand Up @@ -685,6 +685,14 @@
triggerHandler(event, phase);
}
}
//Special case - A tap should always fire on touch end regardless,
//So here we manually trigger the tap end handler by itself
//We dont run trigger handler as it will re-trigger events that may have fired already
else if (!options.triggerOnTouchEnd && hasTap()) {
//Trigger the pinch events...
phase = PHASE_END;
triggerHandlerForGesture(event, phase, TAP);
}
else if (phase === PHASE_MOVE) {
phase = PHASE_CANCEL;
triggerHandler(event, phase);
Expand Down Expand Up @@ -958,10 +966,10 @@
}
}


//CLICKS...
if(gesture==TAP) {
if(phase === PHASE_CANCEL) {
if(phase === PHASE_CANCEL || phase === PHASE_END) {
if ((fingerCount === 1 || !SUPPORTS_TOUCH) && (isNaN(distance) || distance === 0)) {
//Trigger the event
$element.trigger('tap', [event.target]);
Expand Down
Loading

0 comments on commit f226567

Please sign in to comment.