Событие щелчка мышью Jquery не работает с определенной функцией

Question

Я не настолько опытен во внешнем интерфейсе, но мне было интересно, где ошибка, из-за которой я не могу использовать функцию внизу в сочетании с функцией element.getBoundingClientRect ():

$(document).on('click','img',function(){
    alert("Click event works!");
});

Я создаю инструмент аннотации для нескольких видов моего набора данных, который можно увидеть ниже:

Мне удалось сделать функцию увеличения, которая делает егонамного легче увидеть, где моя мышь находится над изображением, которое я пытаюсь пометить. Проблема в том, что когда я использую эту функцию с событием щелчка, событие щелчка не будет работать. В функции для определения положения моей мыши:

function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
}

Если я заменю a = img.getBoundingClientRect(); на произвольные значения, функция щелчка будет работать, но с этой строкой - нет. Было бы здорово, если бы кто-то мог сказать мне, почему это происходит, и что я могу сделать, чтобы и событие click, и функция getCursorPos () работали.

Полный код можно найти здесь.

Заранее спасибо!

Answer 1

Я нашел решение!

Моя функция щелчка по изображению не работала из-за функции перемещения линз, которая помещала элемент CSS позади моей мыши и перед моим изображением. Заменив селектор в функции щелчка на селектор объектива, а не на изображение, моя функция наконец-то сработала. Спасибо всем за попытку помочь мне.