javascript - 在 mousedown/touchstart 上获取相对于父对象而不是视口(viewport)的位置

Question

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

所以，我知道我可以从事件或原始事件触摸中获取 pageX/Y 或 clientX/Y。但这是与整个视口(viewport)相比的定位。这个 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

查找要设置为 样式 的坐标时不需要 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 的更新 fiddle :http://jsfiddle.net/s52u4/1/

在这种特殊情况下，使用 jQuery 就像用大锤敲击图钉。