获取相对于缩小 div 的鼠标位置

Question

我想要完成的是通过矩阵变换获得鼠标相对于缩小 div 的位置。正如您将在下面的 fiddle 中看到的，我有一个宽度为 4000px 的红色 div，但由于它被缩小，所以看起来比 4000px 小。如果您单击红色 div 中的相交线，应该会发生什么情况，relX 应该读作（大约）2000，而 relY 应该读作 325 左右。

$(".crazyWide").click(function(e){
    var clickPos = $(this).offset(); 
    var relX = e.pageX - clickPos.left;
    var relY = e.pageY - clickPos.top;

    //Used to display current click coords
    $(".debug").empty();
    $(".debug").prepend("relX: " + relX + " relY: " + relY);
});

Fiddle

Answer 1

元素在两个方向上都缩小到 0.12 倍。因此，您可以通过将 relX 和 relY 除以 0.12:

来计算相对鼠标点击位置

$(".debug").prepend("relX: " + (relX / 0.12) + " relY: " + (relY / 0.12));

Updated fiddle

获取相对于缩小 div 的鼠标位置

Get mouse position relative to a zoomed out div

javascript

jquery

css

mouseevent