Question

如何在mousedown或touchstart上获取鼠标相对于容器或其所在元素的位置。

所以，我知道我可以从活动中获得pageX/Y或clientX/Y或触摸原始活动。但这是与整个视口相比的定位。这个div是绝对定位的，所以我怎样才能将它定位在容器的边界内（绝对定位）。

以下是代码：

$('.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又名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/

演示

在mousedown / touchstart上获取相对于父级而非视口的位置

3 个答案: