2

マウスが配置されたコンテナーまたは要素に対して、またはその中でマウスの位置を取得するにはmousedownどうすればよいですか。touchstart

したがって、イベントまたはタッチで元のイベントからpageX/Yorを取得できることを知っています。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

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 に答える