From 293bd1bb6619caa5181ca7bc87d84dc7fa452f63 Mon Sep 17 00:00:00 2001
From: tianjiaxing <tianjiaxing2016@163.com>
Date: Tue, 2 Feb 2021 20:02:54 +0800
Subject: [PATCH] fixed: click event conflict with dragging, image add
 draggable attribute.

---
 src/core/view/components/image/index.vue |  5 +++++
 src/core/view/mixins/touchtrack.js       | 24 +++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/core/view/components/image/index.vue b/src/core/view/components/image/index.vue
index 1c5b5cf85b..62a29e4b2c 100644
--- a/src/core/view/components/image/index.vue
+++ b/src/core/view/components/image/index.vue
@@ -7,6 +7,7 @@
     <img
       v-if="contentPath"
       :src="contentPath"
+      :draggable="draggable"
     >
     <v-uni-resize-sensor
       v-if="mode === 'widthFix' || mode === 'heightFix'"
@@ -39,6 +40,10 @@ export default {
     lazyLoad: {
       type: [Boolean, String],
       default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
diff --git a/src/core/view/mixins/touchtrack.js b/src/core/view/mixins/touchtrack.js
index 77d4cd667d..539feaa2d0 100644
--- a/src/core/view/mixins/touchtrack.js
+++ b/src/core/view/mixins/touchtrack.js
@@ -8,6 +8,7 @@ const addListenerToElement = function (element, type, callback, capture) {
       }
     }
   }, {
+    capture,
     passive: false
   })
 }
@@ -48,6 +49,7 @@ export default {
       }
 
       let $eventOld = null
+      let hasClickListenerOld
       let hasTouchStart
       let hasMouseDown
       addListenerToElement(element, 'touchstart', function ($event) {
@@ -77,8 +79,20 @@ export default {
           return res
         }
       })
+
+      // 阻止点击事件传播，处理拖拽和点击冲突，鼠标移动则添加监听，停止移动则移除监听
+      const clickEventListener = this.__clickEventListener = function ($event) {
+        $event.preventDefault()
+        $event.stopPropagation()
+      }
+
       const mouseMoveEventListener = this.__mouseMoveEventListener = function ($event) {
         if (!hasTouchStart && hasMouseDown && $eventOld) {
+          // 存在鼠标移动，则在 document 上添加点击监听（好处是不用管具体使用拖拽的是什么元素）
+          if (!hasClickListenerOld && (Math.abs(x1 - x0) > 2 || Math.abs(y1 - y0) > 2)) {
+            document.addEventListener('click', clickEventListener, true)
+            hasClickListenerOld = true
+          }
           // TODO target currentTarget touches changedTouches
           const res = fn($event, 'move', $event.pageX, $event.pageY)
           x1 = $event.pageX
@@ -94,15 +108,23 @@ export default {
           return fn($event, 'end', $event.changedTouches[0].pageX, $event.changedTouches[0].pageY)
         }
       })
-      const mouseUpEventListener = this.__mouseUpEventListener = function ($event) {
+      const mouseUpEventListener = this.__mouseUpEventListener = ($event) => {
         hasMouseDown = false
         if (!hasTouchStart && $eventOld) {
+          // 鼠标抬起，存在监听，则 mouseup 结束后移除就监听事件
+          if (hasClickListenerOld) {
+            setTimeout(() => {
+              document.removeEventListener('click', this.__clickEventListener, true)
+              hasClickListenerOld = false
+            }, 0)
+          }
           // TODO target currentTarget touches changedTouches
           $eventOld = null
           return fn($event, 'end', $event.pageX, $event.pageY)
         }
       }
       document.addEventListener('mouseup', mouseUpEventListener)
+
       addListenerToElement(element, 'touchcancel', function ($event) {
         if ($eventOld) {
           hasTouchStart = false
-- 
GitLab