在jQuery中向mousemove事件处理器传递事件与变量的问题

我明白你遇到的问题了——在TypeScript里用jQuery实现拖拽时，想把mousedown时的初始光标位置传给mousemove处理器，结果触发了类型不匹配的错误。这个问题通常是因为你尝试在绑定mousemove事件时直接传递参数，不符合jQuery事件绑定的类型约定。

错误原因分析 #

你可能尝试了类似这样的写法：

// 错误示例：直接传递参数导致类型不匹配
$("#mainContent").on("mousedown", ".itemList > ul > li > p", function(e) {
  const initialX = e.clientX;
  // 这里的参数传递方式不符合TypeScript对jQuery.on()的类型定义
  $(document).on("mousemove", initialX, mouseMove);
});

jQuery的.on()方法如果要传递额外数据，第二个参数需要是PlainObject类型，而且事件处理器的参数签名要对应。直接传递单个数值或者写法不对就会触发Argument of type mousemove is not assignable to the type 'PlainObject...'的错误。

正确的解决方案：用闭包保存初始状态 #

最稳妥的方式是利用闭包来存储拖拽的初始光标位置，这样mousemove处理器可以直接访问这些值，同时完全符合TypeScript的类型要求。以下是修正后的完整代码：

module controls.draganddrop {
    export function init() {
        $("#mainContent").on("mousedown", ".itemList > ul > li > p", mouseDown);
        // 全局绑定mouseup，确保拖拽结束后能及时解绑mousemove
        $(document).on("mouseup", mouseUp);
    }

    // 用闭包变量存储拖拽状态和初始位置
    private let isDragging = false;
    private let initialCursorX: number;
    private let initialCursorY: number;

    function mouseDown(e: JQuery.MouseDownEvent) {
        isDragging = true;
        // 记录mousedown时的初始光标位置
        initialCursorX = e.clientX;
        initialCursorY = e.clientY;
        
        // 绑定mousemove事件，处理器直接访问闭包中的初始值
        $(document).on("mousemove", mouseMove);
        
        // 阻止默认行为，避免拖拽时选中文本或触发其他浏览器行为
        e.preventDefault();
    }

    function mouseMove(e: JQuery.MouseMoveEvent) {
        if (!isDragging) return;

        // 计算光标偏移量
        const offsetX = e.clientX - initialCursorX;
        const offsetY = e.clientY - initialCursorY;

        // 这里写你的拖拽逻辑，比如移动目标元素
        const targetLi = $(e.target).closest("li");
        targetLi.css({
            transform: `translate(${offsetX}px, ${offsetY}px)`
        });
    }

    function mouseUp() {
        isDragging = false;
        // 解绑mousemove事件，避免内存泄漏
        $(document).off("mousemove", mouseMove);
    }
}

另一种方案：用jQuery.data()存储初始位置 #

如果你不想用闭包，也可以把初始位置存在触发mousedown的元素上，通过.data()方法存取：

function mouseDown(e: JQuery.MouseDownEvent) {
    isDragging = true;
    const $target = $(e.target);
    // 把初始位置存在元素的data属性中
    $target.data("dragInitialPos", {
        x: e.clientX,
        y: e.clientY
    });
    
    $(document).on("mousemove", mouseMove);
    e.preventDefault();
}

function mouseMove(e: JQuery.MouseMoveEvent) {
    if (!isDragging) return;
    const $target = $(e.target);
    // 取出初始位置，注意用类型断言指定类型
    const initialPos = $target.data("dragInitialPos") as {x: number, y: number};
    const offsetX = e.clientX - initialPos.x;
    const offsetY = e.clientY - initialPos.y;

    // 拖拽逻辑...
}

关键注意点 #

1. 一定要在mouseup事件中解绑mousemove，否则鼠标松开后拖拽行为还会继续，造成性能问题。
2. 阻止mousedown的默认行为，避免拖拽过程中选中文本或触发浏览器的默认拖拽行为。
3. TypeScript中使用.data()时，需要用类型断言来指定数据的类型，否则会被推断为any类型，失去类型检查的优势。

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