Використовуючи jQuery, як отримати координати кліку на цільовому елементі

109

У мене є такий обробник подій для мого html-елемента

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

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

— Роман
джерело

4

Позиція відносно елемента, вікна перегляду чи всього документа?

— Джеймс

Я змусив це працювати за допомогою e.layerX - e.target.offsetLeft, а для Oprea щойно використав e.offsetX

— Роман

якщо ви хочете отримати його на чуйному сайті. спробуйте цю статтю, ви можете отримати її і на чуйних сайтах. kvcodes.com/2014/03/…

— Квадраджа

235

Ви намагаєтесь отримати позицію вказівника миші 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(): це дає відносне положення елемента, тобто

вважаємо, що елемент вбудований всередину іншого елемента

приклад :

<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));
    });
});

9

+1 для прикладів ... одна примітка, хоча я також додав би тут код, якщо ваше посилання відмирає, це питання стане непотрібним у майбутньому, я ставлю тут код для кожного та короткий опис :)

— Нік Крейвер

2

Існує простіший спосіб зробити випадок '#B': e.offsetXі e.offsetY. Я думаю, ви хочете відредагувати це. Я вже оновив скрипку тут . Я знайшов це рішення завдяки посту, тому дякую.

— toto_tico

Спасибі, тому що я особисто плутати зі зміщенням () і положення (), для тих , хто потребує в подальшому роз'ясненні може прочитати stackoverflow.com/questions/3202008 / ... заради зручності

— simongcc

У мене був елемент, зафіксований внизу - це була 100% ширина, тому я використовував ширину вікна як posX - тож я зміг визначити, чи користувач натискає "X", зроблений за допомогою: після правила css, що знаходився у верхньому правому куті.

— amurrell

Чудовий приклад, але не очевидно, в чому різниця між .position () та .offset (). Вам слід загорнути елемент # C у якийсь батьківський дів з деяким зразковим положенням, щоб побачити, що натискання на # C повертає ваше положення миші всередині елемента, що є батьківським #C, що, мабуть, найменш корисно.

— амік

15

$('#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);
   }); 
})

Тут ви можете знайти більше інформації про DEMO

— Крунал
джерело

1

У відсотках:

$('.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+'%');
});

— l2aelba
джерело

1

Якщо MouseEvent.offsetX це підтримується вашим браузером (всі основні браузери на насправді підтримують), The JQuery об'єкт Event буде містити цей об'єкт.

Властивість лише для читання MouseEvent.offsetX забезпечує зсув у координаті X вказівника миші між цією подією та краєм підкладки цільового вузла.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— Мемет Олсен
джерело

0

див. тут введіть опис посилання

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— AirBlack
джерело