adding doc for mouse

Author: lauren mccarthy

src/input/mouse.js

@@ -145,6 +145,9 @@ define(function (require) {
   /**
    * The mouseMoved() function is called every time the mouse moves and a mouse
    * button is not pressed.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method mouseMoved
    * @example
@@ -166,12 +169,25 @@ define(function (require) {
    * }
    * </code>
    * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function mouseMoved() {
+   *   ellipse(mouseX, mouseY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
 
   /**
    * The mouseDragged() function is called once every time the mouse moves and
    * a mouse button is pressed. If no mouseDragged() function is defined, the
    * touchMoved() function will be called instead if it is defined.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method mouseDragged
    * @example
@@ -193,6 +209,16 @@ define(function (require) {
    * }
    * </code>
    * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function mouseDragged() {
+   *   ellipse(mouseX, mouseY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.onmousemove = function(e){
     var context = this._isGlobal ? window : this;
@@ -228,14 +254,16 @@ define(function (require) {
    * can be used to determine which button has been pressed. If no 
    * mousePressed() function is defined, the touchStarted() function will be
    * called instead if it is defined.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method mousePressed
    * @example
    * <div>
    * <code>
    * // Click within the image to change 
    * // the value of the rectangle
-   * // after the mouse has been clicked
    *       
    * var value = 0;
    * function draw() {
@@ -251,6 +279,16 @@ define(function (require) {
    * }
    * </code>
    * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function mousePressed() {
+   *   ellipse(mouseX, mouseY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.onmousedown = function(e) {
     var context = this._isGlobal ? window : this;
@@ -276,6 +314,10 @@ define(function (require) {
    * The mouseReleased() function is called every time a mouse button is
    * released. If no mouseReleased() function is defined, the touchEnded()
    * function will be called instead if it is defined.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
+   *
    *
    * @method mouseReleased
    * @example
@@ -299,6 +341,16 @@ define(function (require) {
    * }
    * </code>
    * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function mouseReleased() {
+   *   ellipse(mouseX, mouseY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.onmouseup = function(e) {
     var context = this._isGlobal ? window : this;
@@ -322,6 +374,9 @@ define(function (require) {
   /**
    * The mouseClicked() function is called once after a mouse button has been
    * pressed and then released.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method mouseClicked
    * @example
@@ -345,6 +400,16 @@ define(function (require) {
    * }
    * </code>
    * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function mouseClicked() {
+   *   ellipse(mouseX, mouseY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.onclick = function(e) {
     var context = this._isGlobal ? window : this;
@@ -361,6 +426,9 @@ define(function (require) {
    * the mouse wheel if rotated up or away from the user and positive in the
    * other direction. On OS X with "natural" scrolling enabled, the values are
    * opposite.
+   * Browsers may have different default
+   * behaviors attached to various mouse events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    * 
    * See <a href="http://www.javascriptkit.com/javatutors/onmousewheel.shtml">
    * mouse wheel event in JS</a>.

src/input/touch.js

@@ -85,9 +85,42 @@ define(function (require) {
   /**
    * The touchStarted() function is called once after every time a touch is
    * registered. If no touchStarted() function is defined, the mousePressed()
-   * function will be called instead if it is defined.
+   * function will be called instead if it is defined. Browsers may have 
+   * different default
+   * behaviors attached to various touch events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method touchStarted
+   * @example
+   * <div>
+   * <code>
+   * // Touch within the image to change 
+   * // the value of the rectangle
+   *       
+   * var value = 0;
+   * function draw() {
+   *   fill(value);
+   *   rect(25, 25, 50, 50);
+   * }
+   * function touchStarted() {
+   *   if (value == 0) {
+   *     value = 255;
+   *   } else {
+   *     value = 0;
+   *   }
+   * }
+   * </code>
+   * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function touchStarted() {
+   *   ellipse(touchX, touchY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.ontouchstart = function(e) {
     var context = this._isGlobal ? window : this;
@@ -110,9 +143,40 @@ define(function (require) {
   /**
    * The touchMoved() function is called every time a touch move is registered.
    * If no touchStarted() function is defined, the mouseDragged() function will
-   * be called instead if it is defined.
+   * be called instead if it is defined. Browsers may have different default
+   * behaviors attached to various touch events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method touchMoved
+   * @example
+   * <div>
+   * <code>
+   * // Move your finger across the page
+   * // to change its value
+   *       
+   * var value = 0;
+   * function draw() {
+   *   fill(value);
+   *   rect(25, 25, 50, 50);
+   * }
+   * function touchMoved() {
+   *   value = value + 5;
+   *   if (value > 255) {
+   *     value = 0;
+   *   }
+   * }
+   * </code>
+   * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function touchMoved() {
+   *   ellipse(touchX, touchY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.ontouchmove = function(e) {
     var context = this._isGlobal ? window : this;
@@ -135,9 +199,41 @@ define(function (require) {
   /**
    * The touchEnded() function is called every time a touch ends. If no 
    * touchStarted() function is defined, the mouseReleased() function will be
-   * called instead if it is defined.
+   * called instead if it is defined. Browsers may have different default
+   * behaviors attached to various touch events. To prevent any default
+   * behavior for this event, add `return false` to the end of the method.
    *
    * @method touchEnded
+   * @example
+   * <div>
+   * <code>
+   * // Release touch within the image to 
+   * // change the value of the rectangle
+   *       
+   * var value = 0;
+   * function draw() {
+   *   fill(value);
+   *   rect(25, 25, 50, 50);
+   * }
+   * function touchEnded() {
+   *   if (value == 0) {
+   *     value = 255;
+   *   } else {
+   *     value = 0;
+   *   }
+   * }
+   * </code>
+   * </div>
+   * 
+   * <div class="norender">
+   * <code>
+   * function touchEnded() {
+   *   ellipse(touchX, touchY, 5, 5);
+   *   // prevent default
+   *   return false;
+   * }
+   * </code>
+   * </div>
    */
   p5.prototype.ontouchend = function(e) {
     var context = this._isGlobal ? window : this;