Tutorial: Excluded children

Excluded children

touchSwipe Fork me on GitHub

property: excludedElements

If you want to exclude certain child elements from triggering swipes, you can simply add a .noSwipe class to the element. Then the element and any of its children will no longer trigger the swipe.

Also, a jQuery selector is used to exclude input elements as well as the .noSwipe elements. So either add a .noSwipe class the element, or set your own selector in the excludedElements property. Setting your own selector will remove the .noSwipe selector.

    $(function() {
      var swipeCount1=0;
      var swipeCount2=0;
      $("#test").swipe( {
        swipe:function() {
          swipeCount1++;
          $("#textText1").html("You swiped " + swipeCount1 + " times");
        }
        //By default any element with a class .noSwipe is not swipeable
      });
      //Enable swiping...
      $("#test2").swipe( {
        swipe:function() {
          swipeCount2++;
          $("#textText2").html("You swiped " + swipeCount2 + " times");
        },
        //By default the value of $.fn.swipe.defaults.excludedElements is ".noSwipe"
        //To replace or clear the list, re set the excludedElements array.
        //To append to it, do the following (dont forget the proceeding comma) ...
        excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div"
      });
    });
  
Swipe me, the child elements will not trigger swipes by default

I open a new tab if clicked, but im swipeable

Im am NOT swipeable because my class is .noSwipe

Swipe me, the child elements will not trigger swipes as they have been explicitly excluded

Im am NOT swipeable because my im added to the excludedElements array