diff --git a/src/date-picker.vue b/src/date-picker.vue
index ed8d2f6..00931ba 100644
--- a/src/date-picker.vue
+++ b/src/date-picker.vue
@@ -7,7 +7,7 @@
       disabled: disabled,
     }"
   >
-    <div v-if="!inline" class="mx-input-wrapper" @click="openPopup">
+    <div v-if="!inline" class="mx-input-wrapper" @mousedown="openPopup" @touchstart="openPopup">
       <input
         ref="input"
         v-bind="{ name: 'date', type: 'text', autocomplete: 'off', ...inputAttr }"
@@ -22,7 +22,7 @@
         @input="handleInputInput"
         @change="handleInputChange"
       />
-      <i v-if="showClearIcon" class="mx-icon-clear" @click.stop="handleClear">
+      <i v-if="showClearIcon" class="mx-icon-clear" @mousedown.stop="handleClear">
         <slot name="icon-clear">
           <icon-close></icon-close>
         </slot>
diff --git a/src/popup.js b/src/popup.js
index 5f67ff7..66cf630 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -42,8 +42,9 @@ export default {
     if (this.appendToBody) {
       document.body.appendChild(this.$el);
     }
+    this._clickoutEvent = 'ontouchend' in document ? 'touchstart' : 'mousedown';
 
-    document.addEventListener('mousedown', this.handleClickOutside);
+    document.addEventListener(this._clickoutEvent, this.handleClickOutside);
 
     // change the popup position when resize or scroll
     const relativeElement = this.$parent.$el;
@@ -60,7 +61,7 @@ export default {
       this.$el.parentNode.removeChild(this.$el);
     }
 
-    document.removeEventListener('mousedown', this.handleClickOutside);
+    document.removeEventListener(this._clickoutEvent, this.handleClickOutside);
 
     this._scrollParent.removeEventListener('scroll', this._displayPopup);
     window.removeEventListener('resize', this._displayPopup);