hammerjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hammer - 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: Hammer</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_Hammer">Hammer</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 Hammer</h4> <span class="foundat">Class defined in: <a href="../files/src_setup.js.html#l1"><code>src/setup.js:1</code></a></span> <div class="intro"></div> <div id="classdocs"> <ul> <li><a href="#methods">Methods</a></li> <li><a href="#props">Properties</a></li> </ul> <div> <div id="methods"> <a name="methods_Hammer"></a> <div class="method item"> Hammer.Instance <strong class="name"><code>Hammer</code></strong>( <code>element, [options={}] </code> ) <br> <span class="foundat"> <a href="../files/src_setup.js.html#l9"><code>src/setup.js:9</code></a> </span><br> <p>Hammer, use this to create instances</p> <pre class="code prettyprint"><code>var hammertime = new Hammer(myElement);</code></pre> <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>[options={}]</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> <Hammer.Instance> </div> </div> </div> <div id="props"> <a name="props_CALCULATE_INTERVAL"></a> <div class="props item"> <code>CALCULATE_INTERVAL</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l143"><code>src/setup.js:143</code></a></span> <p>interval in which Hammer recalculates current velocity/direction/angle in ms</p> <strong>Default:</strong> 50 </div> <a name="props_defaults"></a> <div class="props item"> <code>defaults</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l35"><code>src/setup.js:35</code></a></span> <p>default settings. more settings are defined per gesture at <code>/gestures</code>. Each gesture can be disabled/enabled by setting it's name (like <code>swipe</code>) to false. You can set the defaults for all instances by changing this object before creating an instance.</p> <h5>Example</h5> <pre class="code prettyprint"><code> Hammer.defaults.drag = false; Hammer.defaults.behavior.touchAction = 'pan-y'; delete Hammer.defaults.behavior.userSelect;</code></pre> </div> <a name="props_defaults.behavior"></a> <div class="props item"> <code>defaults.behavior</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l50"><code>src/setup.js:50</code></a></span> <p>this setting object adds styles and attributes to the element to prevent the browser from doing its native behavior. The css properties are auto prefixed for the browsers when needed.</p> </div> <a name="props_defaults.behavior.contentZooming"></a> <div class="props item"> <code>defaults.behavior.contentZooming</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l85"><code>src/setup.js:85</code></a></span> <p>Specifies whether zooming is enabled. Used by IE10></p> <strong>Default:</strong> 'none' </div> <a name="props_defaults.behavior.tapHighlightColor"></a> <div class="props item"> <code>defaults.behavior.tapHighlightColor</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l102"><code>src/setup.js:102</code></a></span> <p>Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone. This property obeys the alpha value, if specified.</p> <p>If you don't specify an alpha value, Safari on iPhone applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.</p> <strong>Default:</strong> 'rgba(0,0,0,0)' </div> <a name="props_defaults.behavior.touchAction"></a> <div class="props item"> <code>defaults.behavior.touchAction</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l66"><code>src/setup.js:66</code></a></span> <p>Specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming). Used by IE10>. By default this makes the element blocking any touch event.</p> <strong>Default:</strong> : 'none' </div> <a name="props_defaults.behavior.touchCallout"></a> <div class="props item"> <code>defaults.behavior.touchCallout</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l75"><code>src/setup.js:75</code></a></span> <p>Disables the default callout shown when you touch and hold a touch target. On iOS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. This property allows you to disable that callout.</p> <strong>Default:</strong> 'none' </div> <a name="props_defaults.behavior.userDrag"></a> <div class="props item"> <code>defaults.behavior.userDrag</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l93"><code>src/setup.js:93</code></a></span> <p>Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.</p> <strong>Default:</strong> 'none' </div> <a name="props_defaults.behavior.userSelect"></a> <div class="props item"> <code>defaults.behavior.userSelect</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l57"><code>src/setup.js:57</code></a></span> <p>Disables text selection to improve the dragging gesture. When the value is <code>none</code> it also sets <code>onselectstart=false</code> for IE on the element. Mainly for desktop browsers.</p> <strong>Default:</strong> 'none' </div> <a name="props_DIRECTION_DOWN|LEFT|UP|RIGHT"></a> <div class="props item"> <code>DIRECTION_DOWN|LEFT|UP|RIGHT</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <em>(final)</em> <br> <span class="foundat"><a href="../files/src_setup.js.html#l163"><code>src/setup.js:163</code></a></span> <p>direction strings, for safe comparisons</p> <strong>Default:</strong> 'down' 'left' 'up' 'right' </div> <a name="props_DOCUMENT"></a> <div class="props item"> <code>DOCUMENT</code> <<strong><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l118"><code>src/setup.js:118</code></a></span> <p>hammer document where the base events are added at</p> <strong>Default:</strong> window.document </div> <a name="props_EVENT_START|MOVE|END|RELEASE|TOUCH"></a> <div class="props item"> <code>EVENT_START|MOVE|END|RELEASE|TOUCH</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <em>(final)</em> <br> <span class="foundat"><a href="../files/src_setup.js.html#l188"><code>src/setup.js:188</code></a></span> <p>eventtypes</p> <strong>Default:</strong> 'start' 'change' 'move' 'end' 'release' 'touch' </div> <a name="props_EVENT_TYPES"></a> <div class="props item"> <code>EVENT_TYPES</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l152"><code>src/setup.js:152</code></a></span> <p>eventtypes per touchevent (start, move, end) are filled by <code>Event.determineEventTypes</code> on <code>setup</code> the object contains the DOM event names per type (<code>EVENT_START</code>, <code>EVENT_MOVE</code>, <code>EVENT_END</code>)</p> </div> <a name="props_gestures"></a> <div class="props item"> <code>gestures</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l220"><code>src/setup.js:220</code></a></span> <p>gestures namespace see <code>/gestures</code> for the definitions</p> </div> <a name="props_HAS_POINTEREVENTS"></a> <div class="props item"> <code>HAS_POINTEREVENTS</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l127"><code>src/setup.js:127</code></a></span> <p>detect support for pointer events</p> </div> <a name="props_HAS_TOUCHEVENTS"></a> <div class="props item"> <code>HAS_TOUCHEVENTS</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l135"><code>src/setup.js:135</code></a></span> <p>detect support for touch events</p> </div> <a name="props_plugins"></a> <div class="props item"> <code>plugins</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l212"><code>src/setup.js:212</code></a></span> <p>plugins namespace</p> </div> <a name="props_POINTER_MOUSE|TOUCH|PEN"></a> <div class="props item"> <code>POINTER_MOUSE|TOUCH|PEN</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <em>(final)</em> <br> <span class="foundat"><a href="../files/src_setup.js.html#l176"><code>src/setup.js:176</code></a></span> <p>pointertype strings, for safe comparisons</p> <strong>Default:</strong> 'mouse' 'touch' 'pen' </div> <a name="props_READY"></a> <div class="props item"> <code>READY</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_setup.js.html#l202"><code>src/setup.js:202</code></a></span> <p>if the window events are set...</p> <strong>Default:</strong> false </div> <a name="props_VERSION"></a> <div class="props item"> <code>VERSION</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></strong>> <em>(final)</em> <br> <span class="foundat"><a href="../files/src_setup.js.html#l25"><code>src/setup.js:25</code></a></span> <p>version, as defined in package.json the value will be set at each build</p> </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>