如何在单次使用后禁用点击拖拽选择框及mousedown函数

我想实现点击拖拽选择框仅能使用一次——触发一次mousedown函数后就禁用它。原本设计是仅当enabled=true时该函数生效，执行完成后把enabled设为false，但现在enabled为false时函数依然处于激活状态，想请教哪里有疏漏或者方法错误。

原代码 #

<html>

<head>
  <link rel="stylesheet" href="styles/styleSheet.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edstore">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!--BOOTSTRAP ASSETS-->
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&amp;family=Roboto:wght@100;300;400;500;700&amp;display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



</head>

<body>
  <div class="sideform">
    <h1>Custom App</h1>
    <h2>Doc Type: (Single/Multi)</h2>
    <h2>Extract Type:</h2>
    <br>
    <form action="">

      <!--TOGGLE VISIBILITY FOR...-->
      <!--ANGLE-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-angle"></span>
      </label>
      <br>
      <br>
      <!--LINES-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-lines"></span>
      </label>
      <br>
      <br>
      <!--TEXT-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-text"></span>
      </label>

      <!--SPECIFY TABULAR EXTRACTION FOR...-->
      <!--LATTICE TABLES-->
      <h3>Lattice Tables</h4>
        <label for="table2">Table:</label>
        <button type="button" class="button" id="table2" name="table2" onclick="buttonClick()">Table Outline</button>
        <br>
        <label for="header2">Header:</label>
        <button type="button" class="button" id="header2" name="header2">Header Outline</button>
        <br>
        <label for="rel2">Relevant Lines:</label>
        <button type="button" class="button" id="rel2" name="rel2">Relevant Lines</button>
        <br>
        <label for="ignore2">Lines to Ignore:</label>
        <button type="button" class="button" id="ignore2" name="ignore2">Ignore Lines</button>

        <!--STREAM TABLES-->
        <h3>Stream Tables</h4>
          <label for="table1">Table:</label>
          <button type="button" class="button" id="table1" name="table1">Table Outline</button>
          <br>
          <label for="header1">Header:</label>
          <button type="button" class="button" id="header1" name="header1">Header Outline</button>
          <br>
          <label for="rel1">Relevant Lines:</label>
          <button type="button" class="button" id="rel1" name="rel1">Relevant Lines</button>

          <h2>Clustering Type:(X/Y/None)</h2>

          <label for="conversion"></label>
          <button type="submit" id="conversion" name="conversion" class="button">Perform Conversion</button>



    </form>
  </div>
  <div class="main">
    <div id="selection_box"></div>
    <h1 class="title">(FILE NAME)</h1>
    <div id="cloud_main_page">
      <div class="cloud_mouse_selection"></div>
    </div>


  </div>
  <script>
    var enabled = false;

    let canvasElem = document.querySelector("body");

    function getCursorPosition(e) {
      e = e || window.event;
      if (e) {
        if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0)))
          return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
      }
      return null;
    }

    function buttonClick() {
      setTimeout(function() {
        enabled = true;
        console.log(enabled)
        startWorking();
      }, 1500);
    }

    function mousedown(e) {
      getMousePosition(canvasElem, e);
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.orig_x = mxy[0];
      box.orig_y = mxy[1];
      box.style.left = mxy[0] + "px";
      box.style.top = mxy[1] + "px";
      box.style.display = "block";
      document.onmousemove = mousemove;
      document.onmouseup = mouseup;
    }

    function mousemove(e) {
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.style.width = (mxy[0] - box.orig_x) + "px";
      box.style.height = (mxy[1] - box.orig_y) + "px";
    }

    function mouseup(e) {
      var mxy = getCursorPosition(e),
        box = document.getElementById("selection_box"),
        image_box = document.getElementById("image_box"),
        selection = getSelection;
      box.style.display = "none";
      box.style.width = "0";
      box.style.height = "0";
      document.onmousemove = function() {};
      document.onmouseup = function() {};
      getMousePosition(canvasElem, e);
      console.log(enabled);
    }

    function startWorking() {
      if (enabled) {
        document.onmousedown = mousedown;
        enabled = false;
      }
    }


    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;
      console.log("Coordinate x: " + x,
        "Coordinate y: " + y);
    }
  </script>
</body>
</html>

问题分析 #

你当前的逻辑是在startWorking函数中给document.onmousedown绑定了mousedown事件处理函数，但绑定后没有在拖拽完成时解除这个绑定。enabled变量仅控制是否执行绑定操作，一旦绑定成功，即使enabled变为false，事件监听依然存在，所以后续点击仍会触发mousedown函数。

修复方案 #

方案1：拖拽完成后解除事件绑定 #

在拖拽完成的mouseup函数末尾，添加解除mousedown事件绑定的代码，彻底移除事件监听：

function mouseup(e) {
  var mxy = getCursorPosition(e),
    box = document.getElementById("selection_box"),
    image_box = document.getElementById("image_box"),
    selection = getSelection;
  box.style.display = "none";
  box.style.width = "0";
  box.style.height = "0";
  document.onmousemove = function() {};
  document.onmouseup = function() {};
  // 新增：解除mousedown事件绑定
  document.onmousedown = function() {};
  getMousePosition(canvasElem, e);
  console.log(enabled);
}

方案2：通过enabled变量直接控制触发逻辑 #

在mousedown函数开头增加判断，若enabled为false则直接终止执行，同时触发后立即禁用：

function mousedown(e) {
  // 新增：判断enabled，不满足则终止执行
  if (!enabled) return;
  getMousePosition(canvasElem, e);
  var mxy = getCursorPosition(e);
  var box = document.getElementById("selection_box");
  box.orig_x = mxy[0];
  box.orig_y = mxy[1];
  box.style.left = mxy[0] + "px";
  box.style.top = mxy[1] + "px";
  box.style.display = "block";
  document.onmousemove = mousemove;
  document.onmouseup = mouseup;
  // 新增：触发后立即禁用
  enabled = false;
}

这种方式不需要修改startWorking函数，逻辑更直接——只有当enabled为true时才会执行拖拽逻辑，且触发后立即将enabled设为false，后续点击不会再触发。

内容的提问来源于stack exchange，提问作者novawarning