jQuery UI Selectable：如何在“停止”事件中获取鼠标坐标？答案

【问题标题】：jQuery UI Selectable: how to get mouse coordinates on 'stop' event?jQuery UI Selectable：如何在“停止”事件中获取鼠标坐标？
【发布时间】：2012-02-29 16:20:59
【问题描述】：

我想知道如何在停止事件中获得e.pageX 和e.pageY 或其类似物？（以显示弹出菜单为例）

【问题讨论】：

标签： javascript jquery jquery-ui events jquery-selectors

【解决方案1】：

所有 jQueryUI 事件都提供 event 作为回调参数

$( ".selector" ).selectable({
   stop: function(event, ui) {
       alert( event.pageX) ;
   }
});

jQueryUI 的良好学习技巧是将event 和ui 记录到控制台上一些事件。特别是ui。让您对可用的内容有很好的了解

【讨论】：

【解决方案2】：

在上个月我决定我需要一种可靠的方法来检查鼠标定位并使用 jquery 轻松获得鼠标悬停。以下是我使用的代码，我认为它可以解决您的问题。

    var mouse = {
    mouseX: null,
    mouseY: null,
    init: function() {
        $(document).bind('mousemove', function(event) {
            mouse.mouseX = event.pageX;
            mouse.mouseY = event.pageY;
        });
    },
    isOver: function($element) {
        $elementPosition = $($element).offset();
        $elementWidth = $($element).width();
        $elementHeight = $($element).height();
        $returnValue = true;
        if (mouse.mouseX !== null) {
            if (mouse.mouseX < $elementPosition.left) { $returnValue = false; }
            if (mouse.mouseY < $elementPosition.top) { $returnValue = false; }
            if (mouse.mouseX > $elementPosition.left + $elementWidth) { $returnValue = false; }
            if (mouse.mouseY > $elementPosition.top + $elementHeight) { $returnValue = false; }
        }
        return $returnValue;
    }
}

您只需在 domready 上触发 init 即可随时获取当前鼠标坐标，您可以轻松确定鼠标是否在特定元素上。

// Init 
jQuery(document).ready( function() {
    mouse.init();
});

//Getting Positions
var mouseX = mouse.mouseX;
var mouseY = mouse.mouseY;

// Determining Mouseover
if (mouse.isOver($('#elementId'))) {
    alert('Is over');
}

【讨论】：

很好的代码，但 OP 询问如何在 jQuery UI 可选的停止事件上做到这一点。

【解决方案3】：

按照这些思路怎么样？

var curX = 0;
var curY = 0;

$(document).mousemove(function(e)
{
  curX = e.pageX; curY = e.pageY;
});

$( ".selector" ).selectable({
   stop: function(event, ui) { console.log(curX+"/"+curY); }
});

还有：

$(ui).offset()

look at. 可能会很有趣

【讨论】：

【解决方案4】：

这会有帮助吗？只需添加其他两个答案，如果您只是执行 console.log(e)，您可以找到有关该事件的大量信息。并且翻了一下资料，发现pageX和pageY的信息是存放在originalEvent下面的。

                    console.log(e.originalEvent.pageX);
                    console.log(e.originalEvent.pageY);

此外，当您选择一个项目并打开您的 chrome 开发人员工具并查看该元素时，会添加一个带有“ui-selectable-helper”类的 div，该类会计算鼠标的顶部和左侧位置。

【讨论】：