fix ripple effect on touchscreen desktops (vuematerial#479)

Author: Vivere Discere

src/core/components/mdInkRipple/mdInkRipple.vue

@@ -7,19 +7,23 @@
 <style lang="scss" src="./mdInkRipple.scss"></style>
 
 <script>
-  const hasTouch = 'ontouchstart' in document;
-  const getEventName = (type) => {
+  const addEvent = (target, type, handler) => {
     if (type === 'start') {
-      return hasTouch ? 'touchstart' : 'mousedown';
+      target.addEventListener('mousedown', handler);
+      target.addEventListener('touchstart', handler);
+    } else {
+      target.addEventListener('mouseup', handler);
+      target.addEventListener('touchend', handler);
     }
-
-    return hasTouch ? 'touchend' : 'mouseup';
-  };
-  const addEvent = (target, type, handler) => {
-    target.addEventListener(getEventName(type), handler);
   };
   const removeEvent = (target, type, handler) => {
-    target.removeEventListener(getEventName(type), handler);
+    if (type === 'start') {
+      target.removeEventListener('mousedown', handler);
+      target.removeEventListener('touchstart', handler);
+    } else {
+      target.removeEventListener('mouseup', handler);
+      target.removeEventListener('touchend', handler);
+    }
   };
 
   export default {
@@ -135,6 +139,18 @@
         removeEvent(document.body, 'end', this.endRipple);
       },
       startRipple(event) {
+        if (event.type === 'touchstart') {
+          this.previous.push('touch');
+        } else {
+          this.previous.push('mouse');
+        }
+
+        this.previous = this.previous.splice(this.previous.length - 2, this.previous.length);
+
+        if (this.previous.length >= 2 && this.previous[1] === 'touch' && this.previous[0] === 'mouse') {
+          return;
+        }
+
         this.clearState();
         this.awaitingComplete = window.setTimeout(() => {
           this.hasCompleted = true;
@@ -169,6 +185,7 @@
       init() {
         this.rippleElement = this.$el;
         this.parentElement = this.getClosestPositionedParent(this.$el.parentNode);
+        this.previous = ['mouse'];
 
         if (!this.parentElement) {
           this.$destroy();