Jquery鼠标单击事件不适用于某些功能答案

【问题标题】：Jquery mouse click event not working with certain functionJquery鼠标单击事件不适用于某些功能
【发布时间】：2019-10-09 20:17:53
【问题描述】：

我在前端方面没有那么丰富的经验，但我想知道导致我无法将下面的函数与 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() 函数工作，那就太好了。

The full code can be found here.

提前致谢！

【问题讨论】：

img 变量从何而来？是否有任何控制台错误？
img var 来自 document.getElementById({id_of_image});。不幸的是没有控制台错误，如果我尝试调试，程序只是跳过与点击事件相关的断点。
很难实现您想要实现的目标。此外，当我查看日志时，您链接的代码似乎有一些错误。您是否尝试将事件附加到页面上的每个图像？这就是你对这段代码所做的事情：$(document).on('click','img',function(){ alert("Click event works!"); }); 你能澄清你想要实现的目标吗？我似乎无法绕过它。当你的图片被点击时会发生什么？
它可能会有一些错误，因为文件是本地的，并且大多数变量都放在 Flask 的脚本中。这个点击功能仍然是开始，但我的最终目标是能够在我想要的位置单击图像，并且将在该位置上绘制一个边界框。点击功能有效，但只有当我注释掉a = img.getBoundingClientRect();
我建议您打印与将图像发送到控制台或警报相关的所有值，以确认它正确获取图像。如果您在调用与对象相关的函数时遇到错误，老实说，这可能是一些奇怪的空错误。

标签： javascript jquery html mouseevent dom-events

【解决方案1】：

我找到了解决办法！

我在图像上的点击功能不起作用，因为我的移动镜头功能在我的鼠标后面和图像前面放置了一个 CSS 元素。通过将点击功能中的选择器替换为镜头的选择器而不是图像，我的功能终于起作用了。谢谢大家帮助我。

【讨论】：