Added excluded elements jquery selector

src/jquery.touchSwipe.js

@@ -55,6 +55,9 @@
 * $Date: 2012-04-10 (wed, 4 Oct 2012) $
 * $version: 1.4.0	- Added pinch support, pinchIn and pinchOut
 *
+* $Date: 2012-11-10 (Thurs, 11 Oct 2012) $
+* $version: 1.5.0	- Added excludedElements, a jquery selector that specifies child elements that do NOT trigger swipes. By default, this is one select that removes all form, input select, button and anchor elements.
+ *
 * A jQuery plugin to capture left, right, up and down swipes on touch devices.
 * You can capture 2 finger or 1 finger swipes, set the threshold and define either a catch all handler, or individual direction handlers.
 * Options: The defaults can be overridden by setting them in $.fn.swipe.defaults
@@ -82,6 +85,8 @@
 *										"vertical" : will force page to scroll on vertical swipes.
 *		fallbackToMouseEvents 	Boolean		Default true	if true mouse events are used when run on a non touch device, false will stop swipes being triggered by mouse events on non tocuh devices
 *
+*		excludedElements	String 	jquery selector that specifies child elements that do NOT trigger swipes. By default, this is one select that removes all input, select, textarea, button and anchor elements as well as any .noSwipe classes.
+*
 * Methods: To be executed as strings, $el.swipe('disable');
 *		disable		Will disable all touch events until enabled again
 *		enable		Will re-enable the touch events
@@ -149,7 +154,9 @@
 										"horizontal" : will force page to scroll on horizontal swipes.
 										"vertical" : will force page to scroll on vertical swipes.
 									*/
-		fallbackToMouseEvents: true	//Boolean, if true mouse events are used when run on a non touch device, false will stop swipes being triggered by mouse events on non tocuh devices
+		fallbackToMouseEvents: true,	//Boolean, if true mouse events are used when run on a non touch device, false will stop swipes being triggered by mouse events on non tocuh devices
+
+		excludedElements:"button, input, select, textarea, a, .noSwipe, " //a jquery selector that specifies child elements that do NOT trigger swipes. By default, this is one select that removes all form, input select, button and anchor elements.
 	};
 
 
@@ -318,6 +325,7 @@
 			return $element;
 		};
 
+
 		//Private methods
 		/**
 		* Event handler for a touch start event. 
@@ -328,6 +336,10 @@
 			if( getTouchInProgress() )
 				return;
 
+			//Check if this element matches any in the excluded elements selectors,  or its parent is excluded, if so, DONT swipe
+			if( $(event.target).closest( options.excludedElements, $element ).length>0 ) 
+				return;
+
 			//As we use Jquery bind for events, we need to target the original event object
 			event = event.originalEvent;
 

www/demo/7.1_Excluded_children.php

@@ -0,0 +1,97 @@
+<?php include "partials/header.php" ?>
+		<!-- use the jquery.ui.ipad.js plugin to translate touch events to mouse events -->
+		<script type="text/javascript" src="js/jquery.ui.ipad.js"></script>
+
+		<script>
+			$(function() {	
+
+				var swipeCount1=0;
+				var swipeCount2=0;
+
+				$("#test").swipe( {
+						swipe:function() {
+							swipeCount1++;
+							$("#textText1").html("You swiped " + swipeCount1 + " times");
+						},
+						threshold:0
+						//By default, these are all excluded :  button, input, select, textarea, a, .noSwipe
+				});
+
+
+				//Enable swiping...
+				$("#test2").swipe( {
+						swipe:function() {
+							swipeCount2++;
+							$("#textText2").html("You swiped " + swipeCount2 + " times");
+						},
+						threshold:0,
+						//By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, "
+						//To replace or clear the list, re set the excludedElements array.
+						//To append to it, do the following...
+						excludedElements:$.fn.swipe.defaults.excludedElements+"#some_other_div"
+				});
+
+			});
+		</script>
+
+		<?php include "partials/title.php" ?>
+		<h4>property: excludedElements Array</h4>
+		<p>If you want to exclude certain child elements from triggering swipes, you can add a jQuery selector to exclude children.  By default all <i>button</i>, <i>input</i>, <i>select</i>, <i>textarea</i> and <i>a</i> elements are excluded. Along with any element with <i>.noSwipe</i> as a class.
+		So either add a <i>.noSwipe</i> class the element, or parent of the elements you dont want to swipe, or append to the excludedElements property
+		<pre class="prettyprint lang-js">
+
+var swipeCount1=0;
+var swipeCount2=0;
+
+$("#test").swipe( {
+  swipe:function() {
+    swipeCount1++;
+    $("#textText1").html("You swiped " + swipeCount1 + " times");
+  },
+  threshold:0
+  //By default, these are all excluded :  button, input, select, textarea, a, .noSwipe
+});
+
+
+//Append specific elements
+$("#test2").swipe( {
+  swipe:function() {
+    swipeCount2++;
+    $("#textText2").html("You swiped " + swipeswipeCount2Count + " times");
+  },
+  threshold:0,
+  //By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, "
+  //To replace or clear the list, re set the excludedElements array.
+  //To append to it, do the following...
+  excludedElements:$.fn.swipe.defaults.excludedElements+"#some_other_div"
+});		
+		</pre>
+		<?php  echo get_pagination();?>
+
+		<div id="test" class="box">
+			<div id="textText1">Swipe me, the child elements will not trigger swipes by default</div><br/>
+			<form>
+				<input type="text" value="Im not swipeable" />
+				<input type="button" value="Im not swipeable" />
+				<textarea>Im not swipeable</textarea>
+			</form> 
+
+			<div id="another_div" class="box noSwipe" style="width:400px;height:100px;background:#000"><h3>Im am NOT swipeable because my class is .noSwipe</h3></div>
+
+		</div>
+
+
+		<div id="test2" class="box">
+			<div id="textText2">Swipe me, the child elements will not trigger swipes as they have been explicitly excluded</div><br/>
+			<form>
+				<input type="text" value="Im not swipeable" />
+				<input type="button" value="Im not swipeable" />
+				<textarea>Im not swipeable</textarea>
+			</form> 
+
+			<div id="some_other_div" class="box" style="width:400px;height:100px;background:#000"><h3>Im am NOT swipeable because my im added to the excludedElements array</h3></div>
+		</div>
+
+		<?php  echo get_pagination();?>
+
+<?php include "partials/footer.php" ?>