Используя jQuery, как получить координаты клика на целевом элементе

86

У меня есть следующий обработчик событий для моего элемента html

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

Мне нужно найти позицию мыши на # строке поиска во время щелчка. Я бы подумал, что приведенный выше код должен работать, но он дает неверный результат

  • 4
    Положение относительно элемента, области просмотра или всего документа?
  • 0
    Я сделал это, используя e.layerX - e.target.offsetLeft, а для Oprea просто использовал e.offsetX
Показать ещё 1 комментарий
Теги:

5 ответов

190
Лучший ответ

Вы пытаетесь получить позицию указателя мыши relative к элементу (или) просто указателю мыши.

Попробуйте эту демонстрацию: http://jsfiddle.net/AMsK9/

Изменить:

1) event.pageX, event.pageY дает вам относительный документ позиции мыши!

Ссылка: http://api.jquery.com/event.pageX/
     http://api.jquery.com/event.pageY/

2) offset(): дает положение смещения элемента

Ссылка: http://api.jquery.com/offset/

3) position(): он дает относительное положение элемента i.e.,

Рассмотрим элемент, встроенный внутри другого элемента

пример:

<div id="imParent">
   <div id="imchild" />
</div>

Ссылка: http://api.jquery.com/position/

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});
Поделиться
  • 8
    +1 за примеры ... одно примечание, хотя я бы также добавил сюда код, если ваша ссылка умирает, этот вопрос станет бесполезным в будущем, я бы поставил код для каждого и краткое описание здесь :)
  • 2
    Существует более простой способ сделать случай '#B' : e.offsetX и e.offsetY . Я думаю, вы хотели бы отредактировать его. Я уже обновил скрипку здесь . Я нашел это решение благодаря посту, так что спасибо.
Показать ещё 5 комментариев
10 
$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});
Поделиться
3

Попробуйте следующее:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

Здесь вы можете найти info с помощью DEMO

Поделиться
0

Если MouseEvent.offsetX, поддерживается вашим браузером (все основные браузеры фактически поддерживают его), объект jQuery Объект события будет содержать это свойство.

Свойство MouseEvent.offsetX, доступное только для чтения, обеспечивает смещение в координате X указателя мыши между этим событием и краем заполнения целевого объекта node.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});
Поделиться
0

В процентах:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню