Почему перехватываются события другого объекта?

Question

[Дмитрий Гавриленко]

Перехватывая события одного объекта, получая данные дочернего.
Посмотреть.

Суть такова, что я хочу получать XY положения курсора и на основе этих данных гонять кружок под стрелкой. Но в итоге получается, что поступают данные не блока, от которого ловлю события, в самого кружка в этом блоке. Из-за этого круг прыгает туда сюда.

Answer 1

[Dialog]

Виновато всплывание событий.

Решение для текущей верстки:

$(".block").mousemove(function (event) {
    if (event.target == this) {
        $("#X").text(event.offsetX);
        $("#Y").text(event.offsetY);
        
        var effect = $(this).find(".effect");
        effect.css({"left" : event.offsetX - 15 + "px", "top" : event.offsetY - 15 + "px"});
    }
});

Comments

[Дмитрий Гавриленко]

А можно ли как нибудь сделать чтобы событие вообще не обращало на круг внимания? А то пока за его пределы не выйдешь событие не срабатывает

Answer 2

[Станислав Черенков]

Можно отключить у "эффекта" события мыши через CSS:

.effect {
    pointer-events: none;
}

Comments

[Дмитрий Гавриленко]

Отличная мысль! Спасибо! Правда не очень практичная)

Answer 3

[versoul]

сходу влоб можно проверять тот ли это элемент

if(event.target.className === 'block'){

jsfiddle.net/8je0escx
и плз вынесите поиск элемента за обработчик, зачем его каждый раз искать то =((