revert: should use touchstart and mousedown (#52)

react-component · Apr 20, 2017 · 9b81044 · 9b81044
1 parent fe33630
commit 9b81044
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/src/Trigger.jsx b/src/Trigger.jsx
@@ -19,8 +19,7 @@ function returnDocument() {
   return window.document;
 }
 
-// use fastclick for mobile touch
-const ALL_HANDLERS = ['onClick', 'onMouseDown', 'onMouseEnter',
+const ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter',
   'onMouseLeave', 'onFocus', 'onBlur'];
 
 const Trigger = createReactClass({
@@ -166,7 +165,13 @@ const Trigger = createReactClass({
       if (!this.clickOutsideHandler && this.isClickToHide()) {
         currentDocument = props.getDocument();
         this.clickOutsideHandler = addEventListener(currentDocument,
-          'click', this.onDocumentClick);
+          'mousedown', this.onDocumentClick);
+      }
+      // always hide on mobile
+      if (!this.touchOutsideHandler) {
+        currentDocument = currentDocument || props.getDocument();
+        this.touchOutsideHandler = addEventListener(currentDocument,
+          'touchstart', this.onDocumentClick);
       }
       return;
     }
@@ -219,6 +224,11 @@ const Trigger = createReactClass({
     this.preClickTime = Date.now();
   },
 
+  onTouchStart(e) {
+    this.fireEvents('onTouchStart', e);
+    this.preTouchTime = Date.now();
+  },
+
   onBlur(e) {
     this.fireEvents('onBlur', e);
     this.clearDelayTimer();
@@ -232,15 +242,20 @@ const Trigger = createReactClass({
     // focus will trigger click
     if (this.focusTime) {
       let preTime;
-      if (this.preClickTime) {
+      if (this.preClickTime && this.preTouchTime) {
+        preTime = Math.min(this.preClickTime, this.preTouchTime);
+      } else if (this.preClickTime) {
         preTime = this.preClickTime;
+      } else if (this.preTouchTime) {
+        preTime = this.preTouchTime;
       }
       if (Math.abs(preTime - this.focusTime) < 20) {
         return;
       }
       this.focusTime = 0;
     }
     this.preClickTime = 0;
+    this.preTouchTime = 0;
     event.preventDefault();
     const nextVisible = !this.state.popupVisible;
     if (this.isClickToHide() && !nextVisible || nextVisible && this.isClickToShow()) {
@@ -365,6 +380,11 @@ const Trigger = createReactClass({
       this.clickOutsideHandler.remove();
       this.clickOutsideHandler = null;
     }
+
+    if (this.touchOutsideHandler) {
+      this.touchOutsideHandler.remove();
+      this.touchOutsideHandler = null;
+    }
   },
 
   createTwoChains(event) {
@@ -434,9 +454,11 @@ const Trigger = createReactClass({
     if (this.isClickToHide() || this.isClickToShow()) {
       newChildProps.onClick = this.onClick;
       newChildProps.onMouseDown = this.onMouseDown;
+      newChildProps.onTouchStart = this.onTouchStart;
     } else {
       newChildProps.onClick = this.createTwoChains('onClick');
       newChildProps.onMouseDown = this.createTwoChains('onMouseDown');
+      newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
     }
     if (this.isMouseEnterToShow()) {
       newChildProps.onMouseEnter = this.onMouseEnter;