jQuery UI Выбор: как получить координаты мыши на событии «стоп»?

Question

Интересно, как получить e.pageX и e.pageY или их аналоги на остановке события?(например, для отображения всплывающего меню)

Answer 1

Все события jQueryUI предоставляют event в качестве аргумента обратного вызова.

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

Хороший трюк с jQueryUI состоит в том, чтобы регистрировать event и ui в консоли для нескольких событий.Особенно ui.Дает вам хорошее представление о том, что доступно для работы с

Answer 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;
    }
}

Вам просто нужно запустить init на domready, тогда вы можете получить текущие координаты мыши в любое время, и вы можете узнать, еслимышь над определенным элементом легко.

// 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');
}

Answer 3

Поможет ли это? Просто добавив к двум другим ответам, если вы просто выполните console.log (e), вы можете найти много информации о событии. И, просматривая информацию, я обнаружил, что информация pageX и pageY хранится в originalEvent.

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

Кроме того, когда вы выбираете элемент и открываете инструмент разработчика Chrome и просматриваете элемент, добавляется div с классом 'ui-selectable-helper', который вычисляет верхнюю и левую позиции вашей мыши.

Answer 4

как насчет чего-то в этом направлении?

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

может быть интересно посмотреть.