hammerjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Utils - Hammer.JS</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0pr2/build/cssgrids/cssgrids-min.css"> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <script src="http://yui.yahooapis.com/combo?3.8.0pr2/build/yui/yui-min.js"></script> </head> <body class="yui3-skin-sam"> <div id="doc"> <div id="hd" class="yui3-g header"> <div class="yui3-u-3-4"> <h1><a href="../index.html">Hammer.JS: Utils</a></h1> </div> <div class="yui3-u-1-4 version"> <em>API Docs for: 1.1.0</em> </div> </div> <div class="yui3-g"> <div id="sidebar" class="yui3-u"> <div id="modules" class="sidebox"> <div class="hd"> <h2 class="no-toc">Modules</h2> </div> <div class="bd"> <ul> <li><a href="../modules/gestures.html">gestures</a> </li> <li><a href="../modules/hammer.html">hammer</a> </li> </ul> </div> </div> <div id="classes" class="sidebox"> <div class="hd"> <h2 class="no-toc">Classes</h2> </div> <div class="bd"> <ul> <li><a href="../classes/Detection.html">Detection</a></li> <li><a href="../classes/Drag.html">Drag</a></li> <li><a href="../classes/Event.html">Event</a></li> <li><a href="../classes/Gesture.html">Gesture</a></li> <li><a href="../classes/Hammer.html">Hammer</a></li> <li><a href="../classes/Hold.html">Hold</a></li> <li><a href="../classes/Instance.html">Instance</a></li> <li><a href="../classes/PointerEvent.html">PointerEvent</a></li> <li><a href="../classes/Release.html">Release</a></li> <li><a href="../classes/Swipe.html">Swipe</a></li> <li><a href="../classes/Tap.html">Tap</a></li> <li><a href="../classes/Touch.html">Touch</a></li> <li><a href="../classes/Transform.html">Transform</a></li> <li><a href="../classes/Utils.html">Utils</a></li> </ul> </div> </div> <div id="methods-on-page" class="sidebox on-page"> <div class="hd"> <h2 class="no-toc">Methods On Page</h2> </div> <div class="bd"> <ul> <li><a href="#methods_each">each</a></li> <li><a href="#methods_extend">extend</a></li> <li><a href="#methods_getAngle">getAngle</a></li> <li><a href="#methods_getCenter">getCenter</a></li> <li><a href="#methods_getDirection">getDirection</a></li> <li><a href="#methods_getDistance">getDistance</a></li> <li><a href="#methods_getRotation">getRotation</a></li> <li><a href="#methods_getScale">getScale</a></li> <li><a href="#methods_getVelocity">getVelocity</a></li> <li><a href="#methods_hasParent">hasParent</a></li> <li><a href="#methods_inArray">inArray</a></li> <li><a href="#methods_inStr">inStr</a></li> <li><a href="#methods_isVertical">isVertical</a></li> <li><a href="#methods_off">off</a></li> <li><a href="#methods_on">on</a></li> <li><a href="#methods_toArray">toArray</a></li> <li><a href="#methods_toggleBehavior">toggleBehavior</a></li> </ul> </div> </div> <div id="fileTree" class="sidebox"> <div class="hd"> <h2 class="no-toc">Files</h2> </div> <div class="bd"> <ul><li>src/<ul><li><a href="../files/src_detection.js.html">detection.js</a></li><li><a href="../files/src_event.js.html">event.js</a></li><li><a href="../files/src_export.js.html">export.js</a></li><li>gestures/<ul><li><a href="../files/src_gestures_drag.js.html">drag.js</a></li><li><a href="../files/src_gestures_gesture.js.html">gesture.js</a></li><li><a href="../files/src_gestures_hold.js.html">hold.js</a></li><li><a href="../files/src_gestures_release.js.html">release.js</a></li><li><a href="../files/src_gestures_swipe.js.html">swipe.js</a></li><li><a href="../files/src_gestures_tap.js.html">tap.js</a></li><li><a href="../files/src_gestures_touch.js.html">touch.js</a></li><li><a href="../files/src_gestures_transform.js.html">transform.js</a></li></ul></li><li><a href="../files/src_instance.js.html">instance.js</a></li><li><a href="../files/src_pointerevent.js.html">pointerevent.js</a></li><li><a href="../files/src_setup.js.html">setup.js</a></li><li><a href="../files/src_utils.js.html">utils.js</a></li></ul></li></ul> </div> </div> </div> <div id="main" class="yui3-u"> <div class="content"><h4>Class Utils</h4> <span class="foundat">Class defined in: <a href="../files/src_utils.js.html#l1"><code>src/utils.js:1</code></a></span> <div class="intro"></div> <div id="classdocs"> <ul> <li><a href="#methods">Methods</a></li> </ul> <div> <div id="methods"> <a name="methods_each"></a> <div class="method item"> <strong class="name"><code>each</code></strong>( <code>obj, iterator, context </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l52"><code>src/utils.js:52</code></a> </span><br> <p>forEach over arrays and objects</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>obj</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> </li> <li> <code>iterator</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>></strong> <ul> <li><code>item</code> <strong><Any></strong> </li> <li><code>index</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>></strong> </li> <li><code>obj</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> <p>the source object</p> </li> </ul> </li> <li> <code>context</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> <p>value to use as <code>this</code> in the iterator</p> </li> </ul> </div> <a name="methods_extend"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> <strong class="name"><code>extend</code></strong>( <code>dest, src, [merge=false] </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l8"><code>src/utils.js:8</code></a> </span><br> <p>extend method, could also be used for cloning when <code>dest</code> is an empty object. changes the dest object</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>dest</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> <li> <code>src</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> <li> <code>[merge=false]</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>></strong> <p>do a merge</p> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>> <p>dest</p> </div> </div> <a name="methods_getAngle"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a> <strong class="name"><code>getAngle</code></strong>( <code>touch1, touch2 </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l208"><code>src/utils.js:208</code></a> </span><br> <p>calculate the angle between two coordinates</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>touch1</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> <li> <code>touch2</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>> <p>angle</p> </div> </div> <a name="methods_getCenter"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> <strong class="name"><code>getCenter</code></strong>( <code>touches </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l152"><code>src/utils.js:152</code></a> </span><br> <p>get the center of all the touches</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>touches</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>> <p>center contains <code>pageX</code>, <code>pageY</code>, <code>clientX</code> and <code>clientY</code> properties</p> </div> </div> <a name="methods_getDirection"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a> <strong class="name"><code>getDirection</code></strong>( <code>touch1, touch2 </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l223"><code>src/utils.js:223</code></a> </span><br> <p>do a small comparision to get the direction between two touches.</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>touch1</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> <li> <code>touch2</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>> <p>direction matches <code>DIRECTION_LEFT|RIGHT|UP|DOWN</code></p> </div> </div> <a name="methods_getDistance"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a> <strong class="name"><code>getDistance</code></strong>( <code>touch1, touch2 </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l241"><code>src/utils.js:241</code></a> </span><br> <p>calculate the distance between two touches</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>touch1</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> <li> <code>touch2</code> <strong><<a href="../classes/Touch.html" class="crosslink">Touch</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>> <p>distance</p> </div> </div> <a name="methods_getRotation"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a> <strong class="name"><code>getRotation</code></strong>( <code>start, end </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l273"><code>src/utils.js:273</code></a> </span><br> <p>calculate the rotation degrees between two touchLists</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>start</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> <p>array of touches</p> </li> <li> <code>end</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> <p>array of touches</p> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>> <p>rotation</p> </div> </div> <a name="methods_getScale"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a> <strong class="name"><code>getScale</code></strong>( <code>start, end </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l256"><code>src/utils.js:256</code></a> </span><br> <p>calculate the scale factor between two touchLists no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>start</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> <p>array of touches</p> </li> <li> <code>end</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>></strong> <p>array of touches</p> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>> <p>scale</p> </div> </div> <a name="methods_getVelocity"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> <strong class="name"><code>getVelocity</code></strong>( <code>delta_time, delta_x, delta_y </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l192"><code>src/utils.js:192</code></a> </span><br> <p>calculate the velocity between two points. unit is in px per ms.</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>delta_time</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>></strong> </li> <li> <code>delta_x</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>></strong> </li> <li> <code>delta_y</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>> <p>velocity <code>x</code> and <code>y</code></p> </div> </div> <a name="methods_hasParent"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> <strong class="name"><code>hasParent</code></strong>( <code>node, parent </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l134"><code>src/utils.js:134</code></a> </span><br> <p>find if a node is in the given parent</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>node</code> <strong><<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>></strong> </li> <li> <code>parent</code> <strong><<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>> <p>found</p> </div> </div> <a name="methods_inArray"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a> <strong class="name"><code>inArray</code></strong>( <code>src, find </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l100"><code>src/utils.js:100</code></a> </span><br> <p>find if a array contains the object using indexOf or a simple polyfill</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>src</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> <li> <code>find</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a>> <p>false when not found, or the index</p> </div> </div> <a name="methods_inStr"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> <strong class="name"><code>inStr</code></strong>( <code>src, find </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l88"><code>src/utils.js:88</code></a> </span><br> <p>find if a string contains the string using indexOf</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>src</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> <li> <code>find</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>> <p>found</p> </div> </div> <a name="methods_isVertical"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a> <strong class="name"><code>isVertical</code></strong>( <code>direction </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l289"><code>src/utils.js:289</code></a> </span><br> <p>find out if the direction is vertical *</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>direction</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> <p>matches <code>DIRECTION_UP|DOWN</code></p> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>> <p>is_vertical</p> </div> </div> <a name="methods_off"></a> <div class="method item"> <strong class="name"><code>off</code></strong>( <code>element, type, handler </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l40"><code>src/utils.js:40</code></a> </span><br> <p>simple removeEventListener wrapper</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>element</code> <strong><<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>></strong> </li> <li> <code>type</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> <li> <code>handler</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>></strong> </li> </ul> </div> <a name="methods_on"></a> <div class="method item"> <strong class="name"><code>on</code></strong>( <code>element, type, handler </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l28"><code>src/utils.js:28</code></a> </span><br> <p>simple addEventListener wrapper</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>element</code> <strong><<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>></strong> </li> <li> <code>type</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>></strong> </li> <li> <code>handler</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>></strong> </li> </ul> </div> <a name="methods_toArray"></a> <div class="method item"> <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a> <strong class="name"><code>toArray</code></strong>( <code>obj </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l123"><code>src/utils.js:123</code></a> </span><br> <p>convert an array-like object (<code>arguments</code>, <code>touchlist</code>) to an array</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>obj</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> <br><div class="returns"><strong>Returns:</strong> <<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>> </div> </div> <a name="methods_toggleBehavior"></a> <div class="method item"> <strong class="name"><code>toggleBehavior</code></strong>( <code>element, props, [toggle=false] </code> ) <br> <span class="foundat"> <a href="../files/src_utils.js.html#l300"><code>src/utils.js:300</code></a> </span><br> <p>toggle browser default behavior by setting css properties. <code>userSelect='none'</code> also sets <code>element.onselectstart</code> to false <code>userDrag='none'</code> also sets <code>element.ondragstart</code> to false</p> <strong>Parameters:</strong> <ul class="params"> <li> <code>element</code> <strong><HtmlElement></strong> </li> <li> <code>props</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> <li> <code>[toggle=false]</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>></strong> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script>prettyPrint();</script> <script src="../assets/js/yui-prettify.js"></script> <script src="../assets/js/tabs.js"></script> </body> </html>