相关疑难解决方法(0)

我想检测,其中一个MouseEvent已经发生,在相对于点击的元素坐标.为什么？因为我想在点击的位置添加绝对定位的子元素.

我知道在没有CSS3转换时如何检测它(见下面的描述).但是,当我添加一个CSS3转换,然后我的算法中断,我不知道如何解决它.

我没有使用任何JavaScript库,我想了解简单JavaScript中的工作原理.所以,请不要回答"只使用jQuery".

顺便说一句,我想要一个适用于所有MouseEvents的解决方案,而不仅仅是"点击".并不重要,因为我相信所有鼠标事件都具有相同的属性,因此相同的解决方案应该适用于所有这些事件.

背景资料

根据DOM Level 2规范,a MouseEvent几乎没有与获取事件坐标相关的属性:

• screenX并screenY返回屏幕坐标(原点是用户监视器的左上角)
• clientX并clientY返回相对于文档视口的坐标.

因此,为了找到MouseEvent相对于被点击元素内容的位置,我必须做这个数学运算:

ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft

• ev.clientX 是相对于文档视口的坐标
• this.getBoundingClientRect().left 是元素相对于文档视口的位置
• this.clientLeft 是元素边界和内部坐标之间的边界(和滚动条)的数量
• this.scrollLeft 是元素内部的滚动量

getBoundingClientRect(),clientLeft并scrollLeft在CSSOM View Module中指定.

没有CSS变换的实验(它有效)

混乱？尝试以下JavaScript和HTML.点击后,红点应该出现在点击发生的确切位置.这个版本"非常简单",按预期工作.

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
    var top = ev.clientY - …