JQuery kullanarak hedef öğede tıklama koordinatları nasıl alınır

109

Html öğem için aşağıdaki olay işleyicisine sahibim

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

Tıklama anında # arama çubuğunda farenin konumunu bulmam gerekiyor. Yukarıdaki kodun çalışması gerektiğini düşünürdüm ama yanlış sonuç veriyor

— Roma
kaynak

4

Öğeye, görüntü alanına veya belgenin tamamına göre konum?

— James

E.layerX - e.target.offsetLeft kullanarak çalışmasını sağladım ve Oprea için sadece e.offsetX

— Roman

Duyarlı bir sitede almak istiyorsanız. bu makaleyi deneyin, duyarlı sitelerde de alabilirsiniz. kvcodes.com/2014/03/…

— Kvvaradha

235

Fare işaretçisinin konumunu relativeöğeye (veya) yalnızca fare işaretçisi konumuna almaya mı çalışıyorsunuz

Bu Demoyu deneyin: http://jsfiddle.net/AMsK9/

Düzenle :

1) event.pageX, event.pageYsize fare konumu ile ilgili belgeyi verir!

Referans : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): Bir elemanın ofset konumunu verir

Referans : http://api.jquery.com/offset/

3) position(): Size bir elemanın göreceli Konumunu verir, yani,

bir öğenin başka bir öğenin içine gömülü olduğunu düşünün

örnek :

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

Referans : 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

Örnekler için +1 ... yine de kodu buraya ekleyeceğim bir not, eğer bağlantınız ölürse bu soru gelecekte işe yaramaz hale gelirse, her biri için kodu ve kısa bir açıklamayı buraya

— koyarım

2

'#B': e.offsetXVe durumunu yapmanın daha basit bir yolu var e.offsetY. Sanırım onu düzenlemek istersin. Buradaki keman'ı zaten güncelledim . Bu çözümü gönderi sayesinde buldum, çok teşekkürler.

— toto_tico

Teşekkürler, şahsen ofset () ve pozisyon () ile karıştırdığım için, daha fazla açıklamaya ihtiyaç duyan herkes rahatlık uğruna stackoverflow.com/questions/3202008/… 'yi okuyabilir

— simongcc

Alta sabitlenmiş bir elemanım vardı - bu% 100 genişliğiydi, bu yüzden posX yerine pencere genişliğini kullandım - böylece bir kullanıcının bir: after css kuralıyla yapılmış bir "X" i beğenip beğenmediğini belirleyebildim. sağ üst köşedeydi.

— amurrell

Harika bir örnek, ancak .position () ve .offset () arasındaki farkın ne olduğu belli değil. #C öğesine tıklamanın, farenizin üst öğesi #C öğesinin içinde döndürdüğünü görmek için bazı üst div öğelerini # C öğesini bazı örnek konumlarla sarmalısınız, ki bu muhtemelen en az sıklıkla kullanışlıdır.

— amik

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

— Nisar
kaynak

3

Bunu dene:

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

Burada DEMO ile daha fazla bilgi bulabilirsiniz

— krunal
kaynak

1

Yüzde olarak:

$('.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
kaynak

1

Eğer MouseEvent.offsetX edilir desteklenen (tüm büyük tarayıcılar gerçekte bunu destekleyecek) tarayıcınız tarafından, jQuery Olay nesnesi bu özelliği içerecektir.

MouseEvent.offsetX salt okunur özelliği, fare işaretçisinin X koordinatında bu olay ile hedef düğümün dolgu kenarı arasındaki uzaklığı sağlar.

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

— Memet Olsen
kaynak

0

buraya bakın bağlantı açıklamasını buraya girin

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
kaynak