javascript - 忽略向上和向下鼠标按下事件

Question

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

除了拖动和触摸拖动之外，一切都运行良好。如果用户向上或向下拖动，我需要以某种方式禁用/忽略。目前，如果向上或向下拖动，则会触发向左或向右拖动。我一整天都在看这个，我一生都不知道如何阻止它，哈哈

我能够确定用户是否向上或向下滚动，但我不确定如何使用该信息来阻止左右功能的触发。

$(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

Currently, if they drag up or down it triggers a left or right drag.

这是一个通过跟踪 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>