2

如何，在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 样式？

4

3 回答 3

2

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

$('.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 就像用大锤敲击图钉一样。

于 2014-06-26T16:52:24.960 回答
0

您可以在容器上使用 position() 并结合 event.screenX、event.screenY 进行计算。这就是我在这种情况下会做的。还不如把它包装成一个扩展

于 2014-06-26T15:39:45.943 回答
0

您需要找到.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/

于 2014-06-26T16:11:22.103 回答