忽略上下鼠标按下事件

Question

我编写了我的第一个 npm 库，称为 flix 滑块 (https://www.npmjs.com/package/flix-slider)，它有点基于 Netflix 样式滑块。设计师希望滑块以某种方式运行，但我找不到任何符合我需要的东西，所以从头开始构建一个。

除了拖动和触摸拖动之外，一切都很好。如果用户向上或向下拖动，我需要以某种方式禁用/忽略。目前，如果他们向上或向下拖动，则会触发向左或向右拖动。我整天都在看这个，我一生都无法弄清楚如何阻止它，哈哈

如果用户向上或向下滚动，我可以解决问题，但我不确定如何使用该信息来阻止左右功能的触发。

$(document).on('mousemove', function (e) {
          dragMove(e)
        })

var dragMove = function (e) {
          if (oldPageY > e.pageY) {
            limit = true
          }

          if (dragging) {
            // console.log(oldPageY, e.pageY)

            if (oldPageX < e.pageX) {
              xDirection = 'next drag'
              if (limit) {
                $(fsTrack).addClass('fs-being-dragged') // disable items from being clicked
                nextItem(dragItemsToMove)
                limit = false
              }
              oldPageX = e.pageX - pageXOffset
            } else {
              xDirection = 'prev drag'
              if (limit) {
                $(fsTrack).addClass('fs-being-dragged') // disable items from being clicked
                prevItem(dragItemsToMove)
                limit = false
              }
              oldPageX = e.pageX + pageXOffset
            }

            return false
          }
        }

最终我试图实现的只是允许用户向左或向右移动鼠标。即让用户按下鼠标 -> 他们是向左还是向右移动 -> 调用函数

Answer 1

目前，如果他们向上或向下拖动，则会触发向左或向右拖动。

这是一个 sn-p，它通过仅跟踪事件的 MouseEvent.movementX 属性来忽略向上或向下移动。

const ERROR_MARGIN = 3;

function dragMove(event) {
  console.log(event.originalEvent.movementX);

  setClear();
  var action = event.originalEvent.movementX < -ERROR_MARGIN ?
    "left" :
    event.originalEvent.movementX > ERROR_MARGIN ?
    "right" :
    "";

  $("#action").text(action);
}

$("#fsTrack").mousedown(function(e) {
  console.log(e.originalEvent.movementX);
  var action = e.originalEvent.movementX < 0 ? "left" : "right";
  if (action === "left" || action === "right") {
    console.log("drag start")
    $("#fsTrack").on('mousemove', dragMove);
  }
});

$("#fsTrack").mouseup(function(e) {
  console.log("drag stop");
  $("#fsTrack").off("mousemove", dragMove);
});

function setClear() {
  if (window.timeout !== undefined) {
    window.clearTimeout(timeout);
  }
  window.timeout = window.setTimeout(function() {
    $("#action").text("");
  }, 100);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>movement: <span id="action">stopped</span></div>
<div id="fsTrack" style="width:400px;height:40px;background-color:red;"></div>