Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added touchstart touchend touchmove events

  • Loading branch information...
commit b2e2b2f5f30ca34411537ab1f5fa23e79f7165dd 1 parent 074b654
Matthew Lein authored
224 examples/touchoutside/index.php
... ... @@ -0,0 +1,224 @@
  1 +
  2 +<!DOCTYPE html>
  3 +<html lang="en">
  4 +<head>
  5 + <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6 + <title>Ben Alman &raquo; jQuery outside events &raquo; Examples &raquo; clickoutside</title>
  7 + <script type="text/javascript" src="../../shared/ba-debug.js"></script>
  8 + <script type="text/javascript" src="../../shared/jquery-1.4.2.js"></script><script type="text/javascript" src="../../shared/SyntaxHighlighter/scripts/shCore.js"></script><script type="text/javascript" src="../../shared/SyntaxHighlighter/scripts/shBrushJScript.js"></script> <link rel="stylesheet" type="text/css" href="../../shared/SyntaxHighlighter/styles/shCore.css">
  9 + <link rel="stylesheet" type="text/css" href="../../shared/SyntaxHighlighter/styles/shThemeDefault.css">
  10 + <link rel="stylesheet" type="text/css" href="../index.css">
  11 +
  12 +<script type="text/javascript" src="../../jquery.ba-outside-events.js"></script>
  13 +<script type="text/javascript" language="javascript">
  14 +
  15 +$(function(){
  16 +
  17 + // Elements on which to bind the event.
  18 + var elems = $('#test, #test div, #test .bind-me');
  19 +
  20 + // Clear any previous highlights and text.
  21 + $(document)
  22 + .bind( 'touchend', function(event){
  23 + elems
  24 + .removeClass( 'event-outside' )
  25 + .children( '.event-target' )
  26 + .text( ' ' );
  27 + })
  28 + .trigger( 'touchend' );
  29 +
  30 + // Bind the 'clickoutside' event to each test element.
  31 + elems.bind( 'touchendoutside', function(event){
  32 + var elem = $(this),
  33 + target = $(event.target),
  34 +
  35 + // Update the text to reference the event.target element.
  36 + text = 'Clicked: ' + target[0].tagName.toLowerCase()
  37 + + ( target.attr('id') ? '#' + target.attr('id')
  38 + : target.attr('class') ? '.' + target.attr('class').replace( / /g, '.' )
  39 + : ' ' );
  40 +
  41 + // Highlight this element and set its text.
  42 + elem
  43 + .addClass( 'event-outside' )
  44 + .children( '.event-target' )
  45 + .text( text );
  46 + });
  47 +
  48 +});
  49 +
  50 +$(function(){
  51 +
  52 + // Syntax highlighter.
  53 + SyntaxHighlighter.highlight();
  54 +
  55 +});
  56 +
  57 +</script>
  58 +<style type="text/css" title="text/css">
  59 +
  60 +/*
  61 +bg: #FDEBDC
  62 +bg1: #FFD6AF
  63 +bg2: #FFAB59
  64 +orange: #FF7F00
  65 +brown: #913D00
  66 +lt. brown: #C4884F
  67 +*/
  68 +
  69 +#page {
  70 + width: 700px;
  71 +}
  72 +
  73 +#test,
  74 +#test div {
  75 + padding: 1em;
  76 + margin-top: 1em;
  77 +}
  78 +
  79 +#test .bind-me {
  80 + padding: 0 0.5em;
  81 + margin-left: 0.5em;
  82 + white-space: nowrap;
  83 + line-height: 1.6em;
  84 +}
  85 +
  86 +#test,
  87 +#test div,
  88 +#test .bind-me {
  89 + color: #ccc;
  90 + border: 2px solid #ccc;
  91 +}
  92 +
  93 +.event-outside {
  94 + color: #0a0 !important;
  95 + border-color: #0a0 !important;
  96 + background-color: #cfc !important;
  97 +}
  98 +
  99 +#test .bind-me,
  100 +.event-target {
  101 + display: inline-block;
  102 + width: 180px;
  103 + overflow: hidden;
  104 + white-space: pre;
  105 + vertical-align: middle;
  106 +}
  107 +
  108 +</style>
  109 +
  110 +</head>
  111 +<body>
  112 +
  113 +<div id="page">
  114 + <div id="header">
  115 + <h1>
  116 + <a href="http://benalman.com/" class="title"><b>Ben</b> Alman</a>
  117 + &raquo; <a href="http://benalman.com/projects/jquery-outside-events-plugin/">jQuery outside events</a> &raquo; <a href="../">Examples</a> &raquo; clickoutside </h1>
  118 + <h2>Why click something, when you can click everything else?</h2><h3> <a href="http://benalman.com/projects/jquery-outside-events-plugin/">Project Home</a>,
  119 + <a href="http://benalman.com/code/projects/jquery-outside-events/docs/">Documentation</a>,
  120 + <a href="http://github.com/cowboy/jquery-outside-events/">Source</a>
  121 +</h3> </div>
  122 + <div id="content">
  123 + <div id="donate">
  124 + <p>Your generous donation allows me to continue developing and updating my code!</p>
  125 + <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  126 + <input type="hidden" name="cmd" value="_s-xclick">
  127 + <input type="hidden" name="hosted_button_id" value="5791421">
  128 + <input class="submit" type="image" src="../donate.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
  129 + <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
  130 + </form>
  131 + <div class="clear"></div>
  132 + </div>
  133 +
  134 +<p>
  135 + With <a href="http://benalman.com/projects/jquery-outside-events-plugin/">jQuery outside events</a> you can bind to an event that will be triggered only when a specific "originating" event occurs <em>outside</em> the element in question. For example, you can <a href="../clickoutside/">click outside</a>, <a href="../dblclickoutside/">double-click outside</a>, <a href="../mouseoveroutside/">mouse-over outside</a>, <a href="../focusoutside/">focus outside</a> (and <a href="http://benalman.com/code/projects/jquery-outside-events/docs/files/jquery-ba-outside-events-js.html#Defaultoutsideevents">over ten more</a> default "outside" events).
  136 +</p>
  137 +<p>
  138 + You get the idea, right?
  139 +</p>
  140 +
  141 +<h2>The clickoutside event, bound to a few elements</h2>
  142 +
  143 +<p>Just click around, and see for yourself!</p>
  144 +
  145 +<div id="test">
  146 + test <span class="event-target"></span>
  147 +
  148 + <div id="a">
  149 + a <span class="event-target"></span>
  150 + <div id="b">
  151 + b <span class="event-target"></span>
  152 + </div>
  153 + </div>
  154 +
  155 + <div id="c">
  156 + c <span class="event-target"></span>
  157 + <span id="d" class="bind-me">d <span class="event-target"></span> </span>
  158 + <span id="e" class="bind-me">e <span class="event-target"></span> </span>
  159 + </div>
  160 +
  161 + <div id="f">
  162 + f <span class="event-target"></span>
  163 + <div id="g">
  164 + g <span class="event-target"></span>
  165 + <span id="h" class="bind-me">h <span class="event-target"></span> </span>
  166 + <span id="i" class="bind-me">i <span class="event-target"></span> </span>
  167 + </div>
  168 + </div>
  169 +</div>
  170 +
  171 +<h3>The code</h3>
  172 +
  173 +<div class="clear"></div>
  174 +
  175 +<pre class="brush:js">
  176 +$(function(){
  177 +
  178 + // Elements on which to bind the event.
  179 + var elems = $('#test, #test div, #test .bind-me');
  180 +
  181 + // Clear any previous highlights and text.
  182 + $(document)
  183 + .bind( 'click', function(event){
  184 + elems
  185 + .removeClass( 'event-outside' )
  186 + .children( '.event-target' )
  187 + .text( ' ' );
  188 + })
  189 + .trigger( 'click' );
  190 +
  191 + // Bind the 'clickoutside' event to each test element.
  192 + elems.bind( 'clickoutside', function(event){
  193 + var elem = $(this),
  194 + target = $(event.target),
  195 +
  196 + // Update the text to reference the event.target element.
  197 + text = 'Clicked: ' + target[0].tagName.toLowerCase()
  198 + + ( target.attr('id') ? '#' + target.attr('id')
  199 + : target.attr('class') ? '.' + target.attr('class').replace( / /g, '.' )
  200 + : ' ' );
  201 +
  202 + // Highlight this element and set its text.
  203 + elem
  204 + .addClass( 'event-outside' )
  205 + .children( '.event-target' )
  206 + .text( text );
  207 + });
  208 +
  209 +});
  210 +</pre>
  211 +
  212 + </div>
  213 + <div id="footer">
  214 + <p>
  215 + If console output is mentioned, but your browser has no console, this example is using <a href="http://benalman.com/projects/javascript-debug-console-log/">JavaScript Debug</a>. Click this bookmarklet: <a href="javascript:if(!window.firebug){window.firebug=document.createElement(&quot;script&quot;);firebug.setAttribute(&quot;src&quot;,&quot;http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js&quot;);document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init()}else{setTimeout(arguments.callee)}})();void (firebug);if(window.debug&&debug.setCallback){(function(){if(window.firebug&&window.firebug.version){debug.setCallback(function(b){var a=Array.prototype.slice.call(arguments,1);firebug.d.console.cmd[b].apply(window,a)},true)}else{setTimeout(arguments.callee,100)}})()}};">Debug + Firebug Lite</a> to add the Firebug lite console to the current page. Syntax highlighting is handled by <a href="http://alexgorbatchev.com/">SyntaxHighlighter</a>.
  216 + </p>
  217 + <p>
  218 + All original code is Copyright &copy; 2010 "Cowboy" Ben Alman and dual licensed under the MIT and GPL licenses. View the <a href="http://benalman.com/about/license/">license page</a> for more details.
  219 + </p>
  220 + </div>
  221 +</div>
  222 +
  223 +</body>
  224 +</html>
2  jquery.ba-outside-events.js 100644 → 100755
@@ -81,7 +81,7 @@
81 81
82 82 $.map(
83 83 // All these events will get an "outside" event counterpart by default.
84   - 'click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup'.split(' '),
  84 + 'click dblclick mousemove mousedown mouseup mouseover mouseout touchstart touchend touchmove change select submit keydown keypress keyup'.split(' '),
85 85 function( event_name ) { jq_addOutsideEvent( event_name ); }
86 86 );
87 87
3  unit/unit.js 100644 → 100755
@@ -22,6 +22,9 @@ var events = [
22 22 { outside: 'changeoutside', originating: 'change' },
23 23 { outside: 'selectoutside', originating: 'select' },
24 24 { outside: 'submitoutside', originating: 'submit' },
  25 + { outside: 'touchstartoutside', originating: 'touchstart' },
  26 + { outside: 'touchendoutside', originating: 'touchend' },
  27 + { outside: 'touchmoveoutside', originating: 'touchmove' },
25 28
26 29 // A custom "outside" event.
27 30 { outside: 'super-duper-awesome-outside', originating: 'omg-ponies' }

0 comments on commit b2e2b2f

Please sign in to comment.
Something went wrong with that request. Please try again.