眼动仪场景下如何在onmouseover事件中模拟鼠标按下并按住？

我明白你的需求——眼动仪能移动鼠标但没法模拟点击，所以需要在鼠标悬停到目标元素时自动触发拖拽状态。下面是具体的实现方案，基于你现有的jQuery UI Draggable代码修改：

核心思路 #

jQuery UI的Draggable组件是通过监听mousedown事件来启动拖拽流程的。我们可以在mouseover事件中手动模拟一个mousedown事件，让Draggable误以为用户按下了鼠标，从而触发拖拽功能。

完整代码示例 #

<script type="text/javascript">
$(document).ready(function() {
    // 初始化可拖拽组件
    $("#otazka").draggable({ 
        containment: "#obsah" 
    });

    // 绑定mouseover事件，模拟mousedown触发拖拽
    $("#otazka").on('mouseover', function(e) {
        // 避免重复触发：如果当前已经在拖拽中，直接返回
        if ($(this).hasClass('ui-draggable-dragging')) return;

        // 创建一个模拟的mousedown事件，传递当前鼠标坐标
        const mousedownEvent = $.Event('mousedown', {
            clientX: e.clientX,
            clientY: e.clientY,
            which: 1 // 模拟左键点击
        });

        // 触发mousedown事件，启动拖拽
        $(this).trigger(mousedownEvent);
    });

    // 可选：当鼠标离开容器时结束拖拽（防止眼动仪移出后仍保持拖拽状态）
    $("#obsah").on('mouseleave', function() {
        $("#otazka").trigger('mouseup');
    });
});
</script>

<div id="obsah" style="width: 500px; height: 300px; border: 1px solid #ccc;">
    <div id="otazka" style="width: 150px; height: 80px; background: #f0f0f0; padding: 10px;">
        <p>Hover to drag</p>
    </div>
</div>

关键细节说明 #

• 避免重复触发：通过检查ui-draggable-dragging类（jQuery UI Draggable在拖拽时自动添加的类），防止鼠标多次悬停时重复启动拖拽。
• 模拟真实事件：我们在创建mousedown事件时传递了clientX/clientY坐标和which:1（代表左键），确保Draggable能正确识别拖拽起始位置。
• 自动结束拖拽：添加了mouseleave事件监听，当鼠标移出容器时触发mouseup，避免眼动仪移出后元素仍处于拖拽状态。

测试提示 #

确保你的页面已经正确引入了jQuery和jQuery UI库（包括Draggable组件），否则代码无法正常工作。

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