Игнорирование дочерних элементов в mousemove

Я пытаюсь получить положение мыши относительно элемента с помощью 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 или все другие элементы управления мыши, потому что я хочу, чтобы это было touch friendly (путем замены mousemove на touchmove).

какие идеи?

8
javascript mouse-position mousemove

3 ответов

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

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

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

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

5

использовать 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/)

2

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

0