Add touch support with PointerEvent API (if any)

README.md

@@ -272,6 +272,61 @@ The ColorPicker function has recognized only two arguments which means that it b
 and also fixes and positions indicators automatically.
 
 
+Pointer Events
+========
+If you require more widely support with mobile or touch device, you should add `touch-action="none"` to css like:
+```css
+<!-- basic -->
+    #picker { width: 200px; height: 200px; touch-action: none; }
+    #slider { width: 30px; height: 200px; touch-action: none; }
+
+<!-- advanced -->
+    #picker-wrapper {
+        width: 200px;
+        height: 200px;
+        position: relative;
+        touch-action: none;
+    }
+    #slider-wrapper {
+        width: 30px;
+        height: 200px;
+        position: relative;
+        touch-action: none;
+    }
+```
+
+if you require [Pointer Events Polyfill](https://github.com/jquery/PEP) and don't want to use [**No hassle**](#no-hassle) method, according to [Polyfill limitations](https://github.com/jquery/PEP#polyfill-limitations), please add `touch-action="none"` attribute to element like:
+```html
+<!-- basic method -->
+    <div id="picker" touch-action="none"></div>
+    <div id="slider" touch-action="none"></div>
+
+<!-- advanced method -->
+    <div id="picker-wrapper">
+        <div id="picker" touch-action="none"></div>
+        <div id="picker-indicator"></div>
+    </div>
+    <div id="slider-wrapper">
+        <div id="slider" touch-action="none"></div>
+        <div id="slider-indicator"></div>
+    </div>
+```
+Recommend to place in a big wrapper and set `touch-action="none"`, to prevent to fire default event like page scroll. 
+```html
+    <div id="colorpicker" touch-action="none">
+        <div id="picker-wrapper">
+            <div id="picker" touch-action="none"></div>
+            <div id="picker-indicator"></div>
+        </div>
+        <div id="slider-wrapper">
+            <div id="slider" touch-action="none"></div>
+            <div id="slider-indicator"></div>
+        </div>
+    </div>
+```
+
+
+
 License
 ========
 

colorpicker.js

@@ -13,11 +13,11 @@
     var colorpickerHTMLSnippet = [
 
         '<div class="picker-wrapper">',
-                '<div class="picker"></div>',
+                '<div class="picker" touch-action="none"></div>',
                 '<div class="picker-indicator"></div>',
         '</div>',
         '<div class="slide-wrapper">',
-                '<div class="slide"></div>',
+                '<div class="slide" touch-action="none"></div>',
                 '<div class="slide-indicator"></div>',
         '</div>'
 
@@ -35,8 +35,13 @@
         if (evt.offsetX !== undefined && evt.offsetY !== undefined) {
             return { x: evt.offsetX, y: evt.offsetY };
         }
-        // Firefox:
         var wrapper = evt.target.parentNode.parentNode;
+        // PEP fix
+        if (typeof evt.offsetX === 'undefined') {
+            wrapper = wrapper.getBoundingClientRect();
+            return { x: evt.pageX - wrapper.x, y: evt.pageY - wrapper.y};
+        }
+        // Firefox:
         return { x: evt.layerX - wrapper.offsetLeft, y: evt.layerY - wrapper.offsetTop };
     }
 
@@ -187,6 +192,8 @@
         return function(evt) {
             evt = evt || window.event;
             var mouse = mousePosition(evt);
+            mouse.y = mouse.y > slideElement.clientHeight ? slideElement.clientHeight : mouse.y;
+            mouse.y = mouse.y < 0 ? 0 : mouse.y;
             ctx.h = mouse.y / slideElement.offsetHeight * 360 + hueOffset;
             var pickerColor = hsv2rgb({ h: ctx.h, s: 1, v: 1 });
             var c = hsv2rgb({ h: ctx.h, s: ctx.s, v: ctx.v });
@@ -206,6 +213,11 @@
                 width = pickerElement.offsetWidth,            
                 height = pickerElement.offsetHeight;
 
+            mouse.x = mouse.x > pickerElement.clientWidth ? pickerElement.clientWidth : mouse.x;
+            mouse.x = mouse.x < 0 ? 0 : mouse.x;
+            mouse.y = mouse.y > pickerElement.clientHeight ? pickerElement.clientHeight : mouse.y;
+            mouse.y = mouse.y < 0 ? 0 : mouse.y;
+
             ctx.s = mouse.x / width;
             ctx.v = (height - mouse.y) / height;
             var c = hsv2rgb(ctx);
@@ -320,16 +332,26 @@
 
         var mousedown = false;
 
-        addEventListener(element, 'mousedown', function(evt) { mousedown = true;  });
-        addEventListener(element, 'mouseup',   function(evt) { mousedown = false;  });
-        addEventListener(element, 'mouseout',  function(evt) { mousedown = false;  });
-        addEventListener(element, 'mousemove', function(evt) {
+        if (window.PointerEvent) {
+            addEventListener(element, 'pointerdown', function(evt) { mousedown = true;  });
+            addEventListener(element, 'pointerup',   function(evt) { mousedown = false;  });
+            addEventListener(element, 'pointerout',  function(evt) { mousedown = false;  });
+            addEventListener(element, 'pointermove', function(evt) {
+                if (mousedown) {
+                    listener(evt);
+                }
+            });
 
-            if (mousedown) {
-
-                listener(evt);
-            }
-        });
+        } else {
+            addEventListener(element, 'mousedown', function(evt) { mousedown = true;  });
+            addEventListener(element, 'mouseup',   function(evt) { mousedown = false;  });
+            addEventListener(element, 'mouseout',  function(evt) { mousedown = false;  });
+            addEventListener(element, 'mousemove', function(evt) {
+                if (mousedown) {
+                    listener(evt);
+                }
+            });
+        }
     }