Javascript 鼠标在子元素中的位置，与缩放、滚动、大小无关

我试图在页面元素中计算鼠标坐标

请通过以下网址查看JSFIDLE：

$（'#p1，#p2，#p3'）。打开（'单击鼠标移动触摸移动'，功能（ev）{
var目标=ev.originalEvent.currentTarget；
var offset=$（target.offset（）；
var x=ev.originalEvent.pageX；
var y=ev.originalEvent.pageY；
$（coords）.html（x+'，'+y）；
$（elm.html（target.id+'{'+offset.left+'，'+offset.top+'}'）；
});
var main=$（“#main”）；
var content=$（“#content”）；
var zoom=$（“#zoom”）；
var coords=$（“#coords”）；
var scroll=$（“#scroll”）；
var zoomv=0.5；
$（content.css（{zoom:zoomv}）；
$（'#headh'）.html（$（'#head'）.height（））；
$（'#headsize'）。在（'click'，函数（ev）上{
$（“#headbig”）.toggle（）；
$（'#headh'）.html（$（'#head'）.height（））；
});
$（'#zoomin'）。在（'单击'，函数（）上）{
zoomv+=0.1；
$（内容）.css({
zoom:zoomv
});
$（zoom）.html（zoomv）；
});
$（'#zoomout'）。在（'单击'，函数（）上）{
如果（zoomv<.2）{
返回；
}
zoomv-=0.1；
$（内容）.css({
zoom:zoomv
});
$（zoom）.html（zoomv）；
});
$（主）.on（'scroll'，功能（ev）{
$（scroll.html（$（main.scrollLeft（）+'，'+$（main.scrollTop（））；
});
html，正文{
保证金：0；
填充：0；
}
#头{
边框：2px#880实心；
}
#头大{
边框：2px#ccc虚线；
高度：50px；
显示：无；
}
#主要{
溢出：自动；
高度：186px；
背景色：#f00；
}
#内容{
身高：0；
位置：相对位置；
溢出：可见；
背景色：#00f；
}
#p1、p2、p3{
背景色：#0ff；
利润率：10px；
宽度：600px；
高度：800px；
光标：指针；
}



鼠标坐标：0，0


元素偏移量：null，0，0


主卷轴：0，0


内容缩放：0.5


头高：0
第1页
第2页
第3页
如果不使用“缩放”，而是使用“变换比例”，则会更轻松。缩放调整大小，然后进行渲染，其中“缩放”渲染时，将调整大小，从而使坐标系保持不变

然后使用ev.offsetX和ev.offsetY？他们应该给你你想要的坐标。这将为您提供0,0和600800之间的铬在所有缩放级别

$('#zoomin').on('click', function(){
    zoomv += .1;
    $(content).css({
        'transform-origin': 'left top',
        transform: 'scale(' + zoomv + ')'
    });
    $(zoom).html(zoomv);
});

当前光标值与div位置相关，因此需要从当前光标位置排除div的左值和顶值

我有两个变量a和b，取当前div的左上方位置，然后从x和y值中排除它

我已经更新了

你的建议给出了正确的鼠标位置。但是，“变换比例”给出的结果与“缩放”不同。在JSFIDLE上可以看到不同之处：我需要与zoom提供的缩放结果相同的缩放结果。您是对的，看起来我可以用与您类似的方式制作一些东西。谢谢。很抱歉，您的建议没有给出缩放值为1以外的预期结果。它应该与其他缩放值一起工作，您是否可以使用更改的缩放值粘贴JSFIDLE链接？
 function(ev){
    var target = ev.originalEvent.currentTarget;
    var offset = $(target).offset();
    var a = offset.left
    var b = offset.top
    var x = ev.originalEvent.pageX;
    var y = ev.originalEvent.pageY;

    $(coords).html((parseInt(x)-parseInt(a)) + ', ' + (parseInt(y)-parseInt(b)));

    $(elm).html(target.id + ' {' + offset.left + ', ' + offset.top + '}');  
});