interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>src/interactablePreventDefault.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="Interactable.html">Interactable</a></li><li class="nav-item">F<a href="Interactable.html#actionChecker">actionChecker</a></li><li class="nav-item">F<a href="Interactable.html#context">context</a></li><li class="nav-item">F<a href="Interactable.html#deltaSource">deltaSource</a></li><li class="nav-item">F<a href="Interactable.html#draggable">draggable</a></li><li class="nav-item">F<a href="Interactable.html#dropzone">dropzone</a></li><li class="nav-item">F<a href="Interactable.html#fire">fire</a></li><li class="nav-item">F<a href="Interactable.html#gesturable">gesturable</a></li><li class="nav-item">F<a href="Interactable.html#getRect">getRect</a></li><li class="nav-item">F<a href="Interactable.html#off">off</a></li><li class="nav-item">F<a href="Interactable.html#on">on</a></li><li class="nav-item">F<a href="Interactable.html#origin">origin</a></li><li class="nav-item">F<a href="Interactable.html#preventDefault">preventDefault</a></li><li class="nav-item">F<a href="Interactable.html#rectChecker">rectChecker</a></li><li class="nav-item">F<a href="Interactable.html#resizable">resizable</a></li><li class="nav-item">F<a href="Interactable.html#set">set</a></li><li class="nav-item">F<a href="Interactable.html#styleCursor">styleCursor</a></li><li class="nav-item">F<a href="Interactable.html#unset">unset</a></li><li class="nav-heading">C<a href="InteractEvent.html">InteractEvent</a></li><li class="nav-item">F<a href="InteractEvent.html#stopImmediatePropagation">stopImmediatePropagation</a></li><li class="nav-item">F<a href="InteractEvent.html#stopPropagation">stopPropagation</a></li><li class="nav-heading">C<a href="Interaction.html">Interaction</a></li><li class="nav-item">F<a href="Interaction.html#doMove">doMove</a></li><li class="nav-item">F<a href="Interaction.html#end">end</a></li><li class="nav-item">F<a href="Interaction.html#start">start</a></li><li class="nav-item">F<a href="Interaction.html#stop">stop</a></li><li class="nav-heading">C<a href="module.exports_module.exports.html">exports</a></li><li class="nav-heading">Modules</li><li class="nav-heading">M<a href="module-interact.html">interact</a></li><li class="nav-item">F<a href="module-interact.html#.debug">debug</a></li><li class="nav-item">F<a href="module-interact.html#.dynamicDrop">dynamicDrop</a></li><li class="nav-item">F<a href="module-interact.html#.isSet">isSet</a></li><li class="nav-item">F<a href="module-interact.html#.maxInteractions">maxInteractions</a></li><li class="nav-item">F<a href="module-interact.html#.off">off</a></li><li class="nav-item">F<a href="module-interact.html#.on">on</a></li><li class="nav-item">F<a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></li><li class="nav-item">F<a href="module-interact.html#.stop">stop</a></li><li class="nav-item">F<a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></li><li class="nav-item">F<a href="module-interact.html#.supportsTouch">supportsTouch</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#interact">interact</a></li> </nav> <div class="code-col-bg"></div> <div id="main"> <h1 class="page-title">src/interactablePreventDefault.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>const Interactable = require('./Interactable'); const Interaction = require('./Interaction'); const scope = require('./scope'); const is = require('./utils/is'); const events = require('./utils/events'); const browser = require('./utils/browser'); const { nodeContains, matchesSelector } = require('./utils/domUtils'); /** * Returns or sets whether to prevent the browser's default behaviour in * response to pointer events. Can be set to: * - `'always'` to always prevent * - `'never'` to never prevent * - `'auto'` to let interact.js try to determine what would be best * * @param {string} [newValue] `true`, `false` or `'auto'` * @return {string | Interactable} The current setting or this Interactable */ Interactable.prototype.preventDefault = function (newValue) { if (/^(always|never|auto)$/.test(newValue)) { this.options.preventDefault = newValue; return this; } if (is.bool(newValue)) { this.options.preventDefault = newValue? 'always' : 'never'; return this; } return this.options.preventDefault; }; Interactable.prototype.checkAndPreventDefault = function (event) { const setting = this.options.preventDefault; if (setting === 'never') { return; } if (setting === 'always') { event.preventDefault(); return; } // setting === 'auto' // don't preventDefault of touch{start,move} events if the browser supports passive // events listeners. CSS touch-action and user-selecct should be used instead if (events.supportsPassive && /^touch(start|move)$/.test(event.type) && !browser.isIOS) { return; } // don't preventDefault of pointerdown events if (/^(mouse|pointer|touch)*(down|start)/i.test(event.type)) { return; } // don't preventDefault on editable elements if (is.element(event.target) && matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) { return; } event.preventDefault(); }; function onInteractionEvent ({ interaction, event }) { if (interaction.target) { interaction.target.checkAndPreventDefault(event); } } for (const eventSignal of ['down', 'move', 'up', 'cancel']) { Interaction.signals.on(eventSignal, onInteractionEvent); } // prevent native HTML5 drag on interact.js target elements Interaction.docEvents.dragstart = function preventNativeDrag (event) { for (const interaction of scope.interactions) { if (interaction.element && (interaction.element === event.target || nodeContains(interaction.element, event.target))) { interaction.target.checkAndPreventDefault(event); return; } } }; </code></pre> </article> </section> </div> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>