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

时间:2015-05-15 13:24:59

标签: javascript jquery css mouseevent

我想要实现的是通过矩阵变换获得鼠标相对于缩小的div的位置。正如您将在下面的小提琴中看到的,我有一个宽度为4000px的红色div,但是因为它已经缩小,它显得小于4000px。如果你点击红色div中的相交线,会发生什么?relX应该读取({}} 2000relY应该读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

1 个答案:

答案 0 :(得分:1)

元素在两个方向上缩小到0.12倍。因此,您可以将relXrelY除以0.12来计算相对鼠标点击位置:

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

Updated fiddle