获取相对于父项的位置，而不是在mousedown / touchstart上的视口

Question

如何在mousedown或touchstart上如何获得鼠标相对于发生容器或元素的位置或在其内部的位置。

因此，我知道我可以从事件中或通过原始事件获得pageX/Y或clientX/Y 但这是与整个视口相比的定位。 这个div是绝对定位的，因此如何将其定位在其容器的边界内（绝对定位）。

如此有效： http : //jsfiddle.net/Fb6An/

这是代码：

$('.dataCard').on('mousedown touchstart', function(event){
    $(this).children('.ripple').show().css({'left':event.clientX || event.originalEvent.clientX, 'top':event.clientY || event.originalEvent.clientY});
});

除非它不适用于我正在研究的整个网站上的某些元素。 在更靠近屏幕右边缘的元素上，它比实际鼠标的位置更偏向右侧和下方。 在左侧的元素中，它可以正常工作。

所以我想知道如何获取元素中的位置并在其中设置.ripple的样式？

Answer 1

查找设置为style的坐标时无需jQuery：

$('.dataCard').on('mousedown touchstart', function(event){
    var clickX = (event.clientX || event.originalEvent.clientX),
        clickY = (event.clientY || event.originalEvent.clientY);

    $(this).children('.ripple').each(function(){
        $(this)
            .show()
            .css({
                left: clickX - this.offsetParent.offsetLeft,
                top: clickY - this.offsetParent.offsetTop
            });
    });
});

来自@Gaby aka G.Petrioli的更新小提琴： http ： //jsfiddle.net/s52u4/1/

在这种情况下，使用jQuery就像用大铁锤敲打图钉一样。

Answer 2

您可以在容器上使用position（）并与event.screenX，event.screenY结合进行计算。 这就是我在这种情况下要做的。 最好将其包装到扩展中

Answer 3

您需要找到.offsetParent() （ 位置最接近的元素 ）并减去其.offset()值。

$('.dataCard').on('mousedown touchstart', function(event){
    var clickX = (event.clientX || event.originalEvent.clientX),
        clickY = (event.clientY || event.originalEvent.clientY);

    $(this).children('.ripple').each(function(){
        var ripple = $(this).show(),
            container = ripple.offsetParent(),
            offset = container.offset(),
            correctX = clickX - offset.left,
            correctY = clickY - offset.top;

        ripple.css({ left: correctX, top: correctY});
    });
});

演示在http://jsfiddle.net/s52u4/