阻止 mousemove 或 touchmove 与 click 事件同时触发

最近做了自己的开源项目 Msw-Tools，参考了 VConsole 工具中按钮的拖拽功能，计划给 MSW 按钮也增加类似的拖拽效果，并兼容PC端和手机端，但是遇到一个问题：一个按钮绑定了多个事件，怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。

一、背景

如上图所示，实现 MSW 按钮拖拽要用到 mousedown、mousemove、mouseup 事件，对应的移动端要用到 touchstart、touchmove、touchend 事件，但是按钮上已经绑定了 click 点击事件，所以就要想办法阻止 mouse 鼠标事件或 touch 触摸事件 与 click 事件同时触发。不然每次拖拽按钮后都会触发 click 事件，这显然是不友好的。

二、问题解析

事件的执行顺序依次是：mousedown > mousemove > mouseup > click，因此，要想 mouseup 事件执行完后，不执行 click 事件，可能不太好直接处理，但是可以间接的实现。设置一个 移动状态的开关，并加上 延迟处理 就可以达到"阻止 click 事件"的目的。

三、代码实现

因为 Msw-Tools 工具是使用 Svelte 框架开发的，所以这里展示 Svelte 部分代码。

<!-- msw.svelte -->

<div class="msw-container">
  <div on:click|stopPropagation={showModal}
       bind:this={btnDOM}
       class="msw-show">MSW</div>
</div>

<script>
  import {
     
      onMount } from "svelte";
  
  // 区分当前是PC端，还是移动端，来设置 mouse 事件 或 touch 事件
  function getModels() {
     
     
    let userAgentInfo = navigator.userAgent;
    let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    return mobileAgents.reduce((prev, ua)=>{
     
     
      return userAgentInfo.includes(ua) || prev
    }, false)
  };
  const MSW_BTN_POSITION = '__MSW_BTN_POSITION__'

  let show = false;
  let btnDOM