当处在resizing/moving状态的时候，吞掉click事件

Array-Huang · Array-Huang · commit 7a3e2199b928 · 2019-07-21T22:00:56.000+08:00
diff --git a/src/config/constant.js b/src/config/constant.js
@@ -1,3 +1,5 @@
 export default {
-  BORDER_SCOPE: 10,
+  BORDER_SCOPE: 10, // resize区域的宽度
+  AVAILABLE_CLICK_MAX_MOVE_DISTANCE: 4, // 在move中，超出这个距离的话将把click事件吞掉
+  AVAILABLE_CLICK_MAX_RESIZE_DISTANCE: 4, // 在resize中，超出这个距离的话将把click事件吞掉
 };
diff --git a/src/libs/common.js b/src/libs/common.js
@@ -237,3 +237,9 @@ export function recoverIframe(window) {
     iframe.style['pointer-events'] = 'auto';
   });
 }
+/* 计算两点间距离 */
+export function calDistance({ x1, y1, x2, y2 }) {
+  const result = Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 0.5);
+  // console.log({ x1, y1, x2, y2 }, result);
+  return result;
+}
diff --git a/src/libs/event-binding.js b/src/libs/event-binding.js
@@ -89,17 +89,20 @@ export function eventBinding(el, customParams) {
   if (finalParams.resizable) {
     el.addEventListener(startEvent, handleStartEventForResize.bind(instance));
     el.addEventListener(moveEvent, cursorChange.bind(instance));
-
-    /* 当处在resizing状态的时候，吞掉click事件 */
-    el.addEventListener('click', event => {
-      if (el.className.indexOf('resizing') > -1) {
-        event.stopImmediatePropagation();
-      }
-    });
   }
 
   /* 最大化相关 */
   if (maximizeHandler) {
     addMaximizeEvent.call(instance, maximizeHandler);
   }
+
+  /* 当处在resizing/moving状态的时候，吞掉click事件 */
+  el.addEventListener('click', event => {
+    if (
+      el.className.indexOf('moving') > -1 ||
+      el.className.indexOf('resizing') > -1
+    ) {
+      event.stopImmediatePropagation();
+    }
+  });
 }
diff --git a/src/libs/move.js b/src/libs/move.js
@@ -7,7 +7,9 @@ import {
   judgeResizeType,
   getSize,
   setSize,
+  calDistance,
 } from './common';
+import constant from '../config/constant';
 
 export function handleStartEventForMove(event) {
   function _handleEndEventForMove(event) {
@@ -43,7 +45,15 @@ export function handleStartEventForMove(event) {
     window.style.right = 'auto'; // 必须设置为auto，否则就会把宽度撑起来
 
     /* 设置moving状态，主要用于吞掉click事件 */
-    if (window.className.indexOf('moving') === -1) {
+    if (
+      calDistance({
+        x1: position.x,
+        y1: position.y,
+        x2: startPoint.x,
+        y2: startPoint.y,
+      }) > constant.AVAILABLE_CLICK_MAX_MOVE_DISTANCE &&
+      window.className.indexOf('moving') === -1
+    ) {
       window.className += ' moving';
     }
   }
diff --git a/src/libs/resize.js b/src/libs/resize.js
@@ -11,7 +11,9 @@ import {
   isInMaximizeHandler,
   judgeResizeType,
   getStyle,
+  calDistance,
 } from './common';
+import constant from '../config/constant';
 
 function _isOnOtherHandler(el, { moveHandler, maximizeHandler }) {
   return el === moveHandler || el === maximizeHandler;
@@ -181,13 +183,31 @@ export function handleStartEventForResize(startEvent) {
     setSize(target, calWidth, calHeight);
     setPositionOffset(target, calLeft, calTop);
     moveEvent.stopPropagation();
+
+    /* 设置resizing状态，主要用于吞掉click事件 */
+    if (
+      calDistance({
+        x1: nowPosition.x,
+        y1: nowPosition.y,
+        x2: startPoint.x,
+        y2: startPoint.y,
+      }) > constant.AVAILABLE_CLICK_MAX_RESIZE_DISTANCE &&
+      target.className.indexOf('resizing') === -1
+    ) {
+      target.className += ' resizing';
+    }
   }
 
   function _handleEndEventForResize(endEvent) {
     document.removeEventListener(moveEvent, _handleMoveEventForResize, false); // 拖拽结束，清除移动的事件回调
 
     endEvent.preventDefault();
     endEvent.stopPropagation();
+
+    /* 撤销moving状态，但由于此状态值主要用于吞掉click事件，因此使用setTimeout延长moving状态至click事件结束 */
+    setTimeout(() => {
+      target.className = target.className.replace(/ ?resizing/, '');
+    }, 0);
   }
 
   const eventEl = startEvent.target;
diff --git a/test.html b/test.html
@@ -39,7 +39,7 @@
     </style>
   </head>
   <body>
-    <div class="window window2 window--by-function" v-show="ifShowWindow">
+    <div class="window window2 window--by-function">
       <div class="window__header">
         函数方式生成的窗口
       </div>
@@ -65,6 +65,12 @@
       }
 
       enhanceWindow();
+
+      document
+        .querySelector('.window--by-function')
+        .addEventListener('click', () => {
+          console.log('触发了click事件');
+        });
     </script>
   </body>
 </html>
