mouse.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery UI mouse documentation</title>
  6. <style>
  7. body {
  8. font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
  9. }
  10. .gutter {
  11. display: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script>{
  17. "title":
  18. "Mouse Interaction",
  19. "excerpt":
  20. "The base interaction layer.",
  21. "termSlugs": {
  22. "category": [
  23. "utilities","interactions"
  24. ]
  25. }
  26. }</script><article id="mouse1" class="entry widget"><h2 class="section-title"><span>Mouse Interaction</span></h2>
  27. <div class="entry-wrapper">
  28. <p class="desc"><strong>Description: </strong>The base interaction layer.</p>
  29. <section id="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
  30. <h3>Options</h3>
  31. <div><a href="#option-cancel">cancel</a></div>
  32. <div><a href="#option-delay">delay</a></div>
  33. <div><a href="#option-distance">distance</a></div>
  34. </div>
  35. <div class="quick-nav-section">
  36. <h3>Methods</h3>
  37. <div><a href="#method-_mouseCapture">_mouseCapture</a></div>
  38. <div><a href="#method-_mouseDelayMet">_mouseDelayMet</a></div>
  39. <div><a href="#method-_mouseDestroy">_mouseDestroy</a></div>
  40. <div><a href="#method-_mouseDistanceMet">_mouseDistanceMet</a></div>
  41. <div><a href="#method-_mouseDown">_mouseDown</a></div>
  42. <div><a href="#method-_mouseDrag">_mouseDrag</a></div>
  43. <div><a href="#method-_mouseInit">_mouseInit</a></div>
  44. <div><a href="#method-_mouseMove">_mouseMove</a></div>
  45. <div><a href="#method-_mouseStart">_mouseStart</a></div>
  46. <div><a href="#method-_mouseStop">_mouseStop</a></div>
  47. <div><a href="#method-_mouseUp">_mouseUp</a></div>
  48. </div>
  49. <div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-longdesc">
  50. <p>Similar to <a href="/jQuery.Widget#jQuery-Widget2"><code>jQuery.Widget</code></a>, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to <code>jQuery.Widget</code>, but it does include internal methods that are not intended to be overwritten. The intended public API is <a href="#method-_mouseStart"><code>_mouseStart()</code></a>, <a href="#method-_mouseDrag"><code>_mouseDrag()</code></a>, <a href="#method-_mouseStop"><code>_mouseStop()</code></a>, and <a href="#method-_mouseCapture"><code>_mouseCapture()</code></a>.</p>
  51. <h3>Dependencies</h3>
  52. <ul>
  53. <li><a href="/jQuery.widget/">Widget Factory</a></li>
  54. </ul>
  55. </div>
  56. <section id="options"><header><h2>Options</h2></header><div id="option-cancel" class="api-item first-item">
  57. <h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
  58. </h3>
  59. <div class="default">
  60. <strong>Default: </strong><code>"input,textarea,button,select,option"</code>
  61. </div>
  62. <div>Prevents interactions from starting on specified elements.</div>
  63. <strong>Code examples:</strong><p>Initialize the mouse with the <code>cancel</code> option specified:</p>
  64. <div class="syntaxhighlighter javascript nogutter">
  65. <table>
  66. <tbody>
  67. <tr>
  68. <td class="gutter">
  69. <div class="line n1">1</div>
  70. </td>
  71. <td class="code">
  72. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ cancel: <span class="string">".title"</span> });</code></div></div></pre>
  73. </td>
  74. </tr>
  75. </tbody>
  76. </table>
  77. </div>
  78. <p>Get or set the <code>cancel</code> option, after initialization:</p>
  79. <div class="syntaxhighlighter javascript nogutter">
  80. <table>
  81. <tbody>
  82. <tr>
  83. <td class="gutter">
  84. <div class="line n1">1</div>
  85. <div class="line n2">2</div>
  86. <div class="line n3">3</div>
  87. <div class="line n4">4</div>
  88. <div class="line n5">5</div>
  89. </td>
  90. <td class="code">
  91. <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"cancel"</span>, <span class="string">".title"</span> );</code></div></div></pre>
  92. </td>
  93. </tr>
  94. </tbody>
  95. </table>
  96. </div>
  97. </div>
  98. <div id="option-delay" class="api-item">
  99. <h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
  100. </h3>
  101. <div class="default">
  102. <strong>Default: </strong><code>0</code>
  103. </div>
  104. <div>Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
  105. <strong>Code examples:</strong><p>Initialize the mouse with the <code>delay</code> option specified:</p>
  106. <div class="syntaxhighlighter javascript nogutter">
  107. <table>
  108. <tbody>
  109. <tr>
  110. <td class="gutter">
  111. <div class="line n1">1</div>
  112. </td>
  113. <td class="code">
  114. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ delay: <span class="number">300</span> });</code></div></div></pre>
  115. </td>
  116. </tr>
  117. </tbody>
  118. </table>
  119. </div>
  120. <p>Get or set the <code>delay</code> option, after initialization:</p>
  121. <div class="syntaxhighlighter javascript nogutter">
  122. <table>
  123. <tbody>
  124. <tr>
  125. <td class="gutter">
  126. <div class="line n1">1</div>
  127. <div class="line n2">2</div>
  128. <div class="line n3">3</div>
  129. <div class="line n4">4</div>
  130. <div class="line n5">5</div>
  131. </td>
  132. <td class="code">
  133. <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">300</span> );</code></div></div></pre>
  134. </td>
  135. </tr>
  136. </tbody>
  137. </table>
  138. </div>
  139. </div>
  140. <div id="option-distance" class="api-item">
  141. <h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
  142. </h3>
  143. <div class="default">
  144. <strong>Default: </strong><code>1</code>
  145. </div>
  146. <div>Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
  147. <strong>Code examples:</strong><p>Initialize the mouse with the <code>distance</code> option specified:</p>
  148. <div class="syntaxhighlighter javascript nogutter">
  149. <table>
  150. <tbody>
  151. <tr>
  152. <td class="gutter">
  153. <div class="line n1">1</div>
  154. </td>
  155. <td class="code">
  156. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ distance: <span class="number">10</span> });</code></div></div></pre>
  157. </td>
  158. </tr>
  159. </tbody>
  160. </table>
  161. </div>
  162. <p>Get or set the <code>distance</code> option, after initialization:</p>
  163. <div class="syntaxhighlighter javascript nogutter">
  164. <table>
  165. <tbody>
  166. <tr>
  167. <td class="gutter">
  168. <div class="line n1">1</div>
  169. <div class="line n2">2</div>
  170. <div class="line n3">3</div>
  171. <div class="line n4">4</div>
  172. <div class="line n5">5</div>
  173. </td>
  174. <td class="code">
  175. <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">10</span> );</code></div></div></pre>
  176. </td>
  177. </tr>
  178. </tbody>
  179. </table>
  180. </div>
  181. </div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-_mouseCapture"><div class="api-item first-item">
  182. <h3>_mouseCapture()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
  183. </h3>
  184. <div>
  185. Determines whether an interaction should start based on event target of the interaction. The default implementation always returns <code>true</code>.
  186. </div>
  187. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  188. <div>
  189. <strong>Code examples:</strong><p>Invoke the _mouseCapture method:</p>
  190. <div class="syntaxhighlighter javascript nogutter">
  191. <table>
  192. <tbody>
  193. <tr>
  194. <td class="gutter">
  195. <div class="line n1">1</div>
  196. </td>
  197. <td class="code">
  198. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseCapture"</span> );</code></div></div></pre>
  199. </td>
  200. </tr>
  201. </tbody>
  202. </table>
  203. </div>
  204. </div>
  205. </div></div>
  206. <div id="method-_mouseDelayMet"><div class="api-item">
  207. <h3>_mouseDelayMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
  208. </h3>
  209. <div>
  210. Determines whether the <a href="#option-delay"><code>delay</code></a> option has been met for the current interaction.
  211. </div>
  212. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  213. <div>
  214. <strong>Code examples:</strong><p>Invoke the _mouseDelayMet method:</p>
  215. <div class="syntaxhighlighter javascript nogutter">
  216. <table>
  217. <tbody>
  218. <tr>
  219. <td class="gutter">
  220. <div class="line n1">1</div>
  221. </td>
  222. <td class="code">
  223. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDelayMet"</span> );</code></div></div></pre>
  224. </td>
  225. </tr>
  226. </tbody>
  227. </table>
  228. </div>
  229. </div>
  230. </div></div>
  231. <div id="method-_mouseDestroy"><div class="api-item">
  232. <h3>_mouseDestroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  233. </h3>
  234. <div>
  235. Destroys the interaction event handlers. This must be called from the extending widget's <code>_destroy()</code> method.
  236. </div>
  237. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  238. <div>
  239. <strong>Code examples:</strong><p>Invoke the _mouseDestroy method:</p>
  240. <div class="syntaxhighlighter javascript nogutter">
  241. <table>
  242. <tbody>
  243. <tr>
  244. <td class="gutter">
  245. <div class="line n1">1</div>
  246. </td>
  247. <td class="code">
  248. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDestroy"</span> );</code></div></div></pre>
  249. </td>
  250. </tr>
  251. </tbody>
  252. </table>
  253. </div>
  254. </div>
  255. </div></div>
  256. <div id="method-_mouseDistanceMet"><div class="api-item">
  257. <h3>_mouseDistanceMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
  258. </h3>
  259. <div>
  260. Determines whether the <a href="#option-distance"><code>distance</code></a> option has been met for the current interaction.
  261. </div>
  262. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  263. <div>
  264. <strong>Code examples:</strong><p>Invoke the _mouseDistanceMet method:</p>
  265. <div class="syntaxhighlighter javascript nogutter">
  266. <table>
  267. <tbody>
  268. <tr>
  269. <td class="gutter">
  270. <div class="line n1">1</div>
  271. </td>
  272. <td class="code">
  273. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDistanceMet"</span> );</code></div></div></pre>
  274. </td>
  275. </tr>
  276. </tbody>
  277. </table>
  278. </div>
  279. </div>
  280. </div></div>
  281. <div id="method-_mouseDown"><div class="api-item">
  282. <h3>_mouseDown()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  283. </h3>
  284. <div>
  285. Handles the beginning of an interaction. Verifies that the event is associated with the primary mouse button and ensures that the <a href="#option-delay"><code>delay</code></a> and <a href="#option-distance"><code>distance</code></a> options are met prior to starting the interaction. When the interaction is ready to start, invokes the <a href="#method-_mouseStart"><code>_mouseStart()</code></a> method for the extending widget to handle.
  286. </div>
  287. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  288. <div>
  289. <strong>Code examples:</strong><p>Invoke the _mouseDown method:</p>
  290. <div class="syntaxhighlighter javascript nogutter">
  291. <table>
  292. <tbody>
  293. <tr>
  294. <td class="gutter">
  295. <div class="line n1">1</div>
  296. </td>
  297. <td class="code">
  298. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDown"</span> );</code></div></div></pre>
  299. </td>
  300. </tr>
  301. </tbody>
  302. </table>
  303. </div>
  304. </div>
  305. </div></div>
  306. <div id="method-_mouseDrag"><div class="api-item">
  307. <h3>_mouseDrag()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  308. </h3>
  309. <div>
  310. The extending widget should implement a <code>_mouseDrag()</code> method to handle each movement of an interaction. This method will receive the mouse event associated with the movement.
  311. </div>
  312. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  313. <div>
  314. <strong>Code examples:</strong><p>Invoke the _mouseDrag method:</p>
  315. <div class="syntaxhighlighter javascript nogutter">
  316. <table>
  317. <tbody>
  318. <tr>
  319. <td class="gutter">
  320. <div class="line n1">1</div>
  321. </td>
  322. <td class="code">
  323. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDrag"</span> );</code></div></div></pre>
  324. </td>
  325. </tr>
  326. </tbody>
  327. </table>
  328. </div>
  329. </div>
  330. </div></div>
  331. <div id="method-_mouseInit"><div class="api-item">
  332. <h3>_mouseInit()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  333. </h3>
  334. <div>
  335. Initializes the interaction event handlers. This must be called from the extending widget's <code>_create()</code> method.
  336. </div>
  337. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  338. <div>
  339. <strong>Code examples:</strong><p>Invoke the _mouseInit method:</p>
  340. <div class="syntaxhighlighter javascript nogutter">
  341. <table>
  342. <tbody>
  343. <tr>
  344. <td class="gutter">
  345. <div class="line n1">1</div>
  346. </td>
  347. <td class="code">
  348. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseInit"</span> );</code></div></div></pre>
  349. </td>
  350. </tr>
  351. </tbody>
  352. </table>
  353. </div>
  354. </div>
  355. </div></div>
  356. <div id="method-_mouseMove"><div class="api-item">
  357. <h3>_mouseMove()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  358. </h3>
  359. <div>
  360. Handles each movement of the interaction. Invokes the <a href="#method-_mouseDrag"><code>mouseDrag()</code></a> method for the extending widget to handle.
  361. </div>
  362. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  363. <div>
  364. <strong>Code examples:</strong><p>Invoke the _mouseMove method:</p>
  365. <div class="syntaxhighlighter javascript nogutter">
  366. <table>
  367. <tbody>
  368. <tr>
  369. <td class="gutter">
  370. <div class="line n1">1</div>
  371. </td>
  372. <td class="code">
  373. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseMove"</span> );</code></div></div></pre>
  374. </td>
  375. </tr>
  376. </tbody>
  377. </table>
  378. </div>
  379. </div>
  380. </div></div>
  381. <div id="method-_mouseStart"><div class="api-item">
  382. <h3>_mouseStart()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  383. </h3>
  384. <div>
  385. The extending widget should implement a <code>_mouseStart()</code> method to handle the beginning of an interaction. This method will receive the mouse event associated with the start of the interaction.
  386. </div>
  387. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  388. <div>
  389. <strong>Code examples:</strong><p>Invoke the _mouseStart method:</p>
  390. <div class="syntaxhighlighter javascript nogutter">
  391. <table>
  392. <tbody>
  393. <tr>
  394. <td class="gutter">
  395. <div class="line n1">1</div>
  396. </td>
  397. <td class="code">
  398. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseStart"</span> );</code></div></div></pre>
  399. </td>
  400. </tr>
  401. </tbody>
  402. </table>
  403. </div>
  404. </div>
  405. </div></div>
  406. <div id="method-_mouseStop"><div class="api-item">
  407. <h3>_mouseStop()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  408. </h3>
  409. <div>
  410. The extending widget should implement a <code>_mouseStop()</code> method to handle the end of an interaction. This method will receive the mouse event associated with the end of the interaction.
  411. </div>
  412. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  413. <div>
  414. <strong>Code examples:</strong><p>Invoke the _mouseStop method:</p>
  415. <div class="syntaxhighlighter javascript nogutter">
  416. <table>
  417. <tbody>
  418. <tr>
  419. <td class="gutter">
  420. <div class="line n1">1</div>
  421. </td>
  422. <td class="code">
  423. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseStop"</span> );</code></div></div></pre>
  424. </td>
  425. </tr>
  426. </tbody>
  427. </table>
  428. </div>
  429. </div>
  430. </div></div>
  431. <div id="method-_mouseUp"><div class="api-item">
  432. <h3>_mouseUp()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
  433. </h3>
  434. <div>
  435. Handles the end of the interaction. Invokes the <a href="#method-_mouseStop"><code>mouseStop()</code></a> method for the extending widget to handle.
  436. </div>
  437. <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
  438. <div>
  439. <strong>Code examples:</strong><p>Invoke the _mouseUp method:</p>
  440. <div class="syntaxhighlighter javascript nogutter">
  441. <table>
  442. <tbody>
  443. <tr>
  444. <td class="gutter">
  445. <div class="line n1">1</div>
  446. </td>
  447. <td class="code">
  448. <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseUp"</span> );</code></div></div></pre>
  449. </td>
  450. </tr>
  451. </tbody>
  452. </table>
  453. </div>
  454. </div>
  455. </div></div></section>
  456. </div></article>
  457. </body>
  458. </html>