Question

当鼠标悬停在图片上时，我正在显示 datePicker 。触发事件的代码如下。

$("#calendar").on("mouseover", function (event) {
  $("#calendar").datepicker("dialog", null, function (date) {
    $("#departureDate").val(date);
  }, options, [event.PageX, event.PageY]);
});

这可以正常工作，因为事件 mouseover 具有发生它的坐标。现在，我还想在关注输入框时触发事件，所以我添加了以下代码，注意到 datePicker 没有显示，因为事件是 null 。当我输入[0,0]作为坐标时，我会将其显示在错误的位置。

$("#departureDate").on("focus", function (event) {
  $("#calendar").datepicker("dialog", null, function (date) {
    $("#departureDate").val(date);
  //}, options, [event.PageX, event.PageY]);
  }, options, [0, 0]);
});

如何获取正在关注的控件的坐标？
甚至更广泛 - 我如何获得导致任何事件的控件的坐标？

Answer 1

您可以使用jQuery的offset()或position()作为

$("#departureDate").on("focus", function (event) {
    var offset = $(this).offset(); // or .position() 
    $("#calendar").datepicker("dialog", null, function (date) {
        $("#departureDate").val(date);
    }, options, [offset.top, offset.left]);
});

.offset()

获取匹配集中第一个元素的当前坐标元素，相对于文档。

.position()

获取匹配元素集合中第一个元素的当前坐标，相对于偏移父元素。

请注意，存在差异，一个获取相对于父级的坐标，另一个获取相对于文档的坐标。

Answer 2

Stackoverflow有解决方案。总的来说，您必须声明每当鼠标移动时更新的全局变量（或对象）。然后在你想要的事件发生时访问它们。

You can only get mouse coordinates using mouse events. If you want to capture the position of the mouse, you can use a global mousemove event listener, and store the coordinates in a set of variables, which can later be accessed by the focus function. Example:

var pageX, pageY; //Declare these globally
$(window).mousemove(function(e){
    pagex = e.pageX;
    pageY = e.pageY;
});

$('input').focus(function(){
    console.log(pageX, pageY); // These variables have been defined by the global
                               //  mousemove event
});

获取event.PageX等效，其中没有真实事件

2 个答案: