Игнорирование дочерних элементов при перемещении мыши

Я пытаюсь получить положение мыши относительно элемента с помощью mousemove. Он отлично работает, но когда указатель мыши наводит на дочерний элемент, координаты относятся к этому дочернему элементу. Мне нужна позиция мыши относительно родительского div, а не дочернего элемента.

См., например, эту JSFiddle.

var object = document.getElementsByClassName('object'),
scene = document.getElementById('scene');

function initMove() {

for(var i=0; i<object.length; i++) {

  object[i].addEventListener("mousemove", function(event) {
    //event.stopPropagation();
    return false;
  }, false);
}

scene.addEventListener("mousemove", function (event) {
  //event.stopPropagation();
  //event.currentTarget;
  moveX = event.offsetX;
  moveY = event.offsetY;
  console.log(moveX + ' + ' + moveY);
  }, false);

}

function init() {
  initMove();
  document.onselectstart = function(){ return false; }
};

init();​

Добавление event.stopPropagation() к дочернему элементу не возвращает данных. И я не уверен, как работает event.currentTarget.

Я не могу использовать mouseenter или любые другие элементы управления мышью, потому что я хочу, чтобы это было удобно для сенсорного управления (путем замены mousemove на touchmove).

Есть идеи?


person Julian    schedule 22.09.2012    source источник


Ответы (3)


В приведенном выше коде для mousemove попробуйте использовать следующее для moveX и moveY:

moveX = event.clientX - scene.offsetLeft;
moveY = event.clientY - scene.offsetTop;

Кроме того, вы забыли # в $('scene').

Вот обновленный JSFiddle.

person prashanth    schedule 22.09.2012
comment
что не так с offsetX и offsetY - person m_rd_n; 07.03.2021

Используйте mousemove и координаты курсора, чтобы получить глобальную позицию мыши. Затем вычтите из этого смещение вашего дочернего элемента.

var scene = $('#scene');
scene.mousemove(function(e){
    var offsetX = e.pageX - scene.offset().left;
    var offsetY = e.pageY - scene.offset().top;
});

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

jQuery(document).ready(function(){

    var scene = $('#scene');
    var object = $('.object');

    scene.mousemove(function(e){
        // get offset of object relative to scene
        var offsetX = e.pageX - scene.offset().left;
        var offsetY = e.pageY - scene.offset().top;

        // grab object in it's center (optional)
        offsetX -= object.width() / 2;
        offsetY -= object.height() / 2;

        // don't left to object out of the scene
        var maxX = scene.width() - object.width();
        var maxY = scene.height() - object.height();

        if(0 > offsetX) offsetX = 0;
        else if(offsetX > maxX) offsetX = maxX ;

        if(0 > offsetY) offsetY = 0;
        else if(offsetY > maxY) offsetY = maxY;

        // delete decimals
        offsetX = Math.floor(offsetX);
        offsetY = Math.floor(offsetY);

        // debug information
        object.html('X: ' + offsetX + '<br>Y: ' + offsetY);

        // move object
        object.css('left', offsetX).css('top', offsetY);
    });

});

Это то, что вы хотели сделать? Вот ваша скрипка: http://jsfiddle.net/Bp3wH/9/ (если хотите, см. эта версия только с оптическими улучшениями http://jsfiddle.net/Bp3wH/11/)

person danijar    schedule 22.09.2012
comment
координаты мыши должны быть относительно основного div, а не страницы. Я думаю, что event.offsetX - единственный правильный способ получить координаты в этом случае. - person Julian; 22.09.2012
comment
они есть, если вычесть смещение основного div. Я работаю на скрипке. Подождите минуту. - person danijar; 22.09.2012
comment
Спасибо, но это не ответ на мой вопрос. В вашем примере дочерняя позиция обновляется с помощью позиции мыши относительно родительского div, это не то, что я хочу. Я просто хочу получить положение мыши относительно родительского div, даже если мышь наводит курсор на дочерний элемент (например, если дочерний элемент не существует). - person Julian; 22.09.2012
comment
Разве это не то, что говорит выходной текст? Я просто позволяю объекту двигаться вместе с курсором. Вам не обязательно использовать все мои линии. - person danijar; 22.09.2012
comment
хорошо, если я удалю части вашего кода, которые перемещают объект, это сработает. К сожалению, мне действительно нужен способ отобразить координаты, используя сцену как событие, а не документ. - person Julian; 23.09.2012
comment
Это то же самое! Просто напишите scene.mousemove(function(e){ ... }); вместо $(document) .... Я обновил свой ответ, потому что считаю его немного лучшим решением. - person danijar; 24.09.2012
comment
Мой вопрос был неполным. Я не могу использовать event.pageX в своем коде, потому что он всегда будет возвращать координату события относительно всего документа. Мне нужна координата относительно сцены, поэтому я использовал event.offsetX. В любом случае спасибо, ваш код работает, даже если я никогда не прошу объект следовать за курсором... - person Julian; 26.09.2012

Для справки в будущем вы можете просто создать абсолютный div и поместить его поверх, установить z-индекс и зафиксировать его вверху и слева от родителя, содержащего дочерний элемент, а затем изменить свой код, чтобы обработчик событий запускался на селекторе для входного слоя сверху. Разделите значения высоты и ширины на X и Y на курсоре, и он будет в центре.

person Community    schedule 22.09.2016