Получить позицию относительно родителя, а не области просмотра при нажатии мыши / касании

Как на mousedown или touchstart я могу получить положение мыши относительно или внутри контейнера или элемента, в котором она находилась.

Итак, я знаю, что могу получить pageX/Y или clientX/Y из события или касания, исходного события. Но это позиционирование по сравнению со всем окном просмотра. Этот div имеет абсолютное позиционирование, так как я могу расположить его в пределах границ своего контейнера ( absolute positioned ).

Итак, это работает: 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?


javascript jquery mousedown touchstart
person wordSmith    schedule 26.06.2014    source источник
comment
является ли .dataCard ближайшим позиционированным элементом? или ваш html более сложный с неизвестным ближайшим элементом?   -  person Gabriele Petrioli    schedule 26.06.2014
comment
см. также этот вопрос/ответ для самого простого решения, которое я видел до сих пор. (простой DOM, jQuery не требуется.)   -  person mindplay.dk    schedule 05.10.2017

Ответы (3)


arrow_upward
2
arrow_downward

Нет необходимости в 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 похоже на удар кувалдой по чертежной кнопке.

person Greg Burghardt    schedule 26.06.2014

arrow_upward
0
arrow_downward

Вы можете использовать position() в своем контейнере и рассчитать это в сочетании с event.screenX, event.screenY. Вот что бы я сделал в этом случае. Можно также обернуть его в расширение

person Dbl    schedule 26.06.2014
comment
можете ли вы показать мне, как это сделать? Быстрая демонстрация или код? и отредактировать ответ вместе с ним? - person wordSmith; 26.06.2014

arrow_upward
0
arrow_downward

Вам нужно найти .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/

person Gabriele Petrioli    schedule 26.06.2014