Verwenden von jQuery zum Abrufen von Klickkoordinaten für das Zielelement

109

Ich habe den folgenden Ereignishandler für mein HTML-Element

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

Ich muss die Position der Maus in der # Suchleiste zum Zeitpunkt des Klickens finden. Ich hätte gedacht, dass der obige Code funktionieren sollte, aber er liefert ein falsches Ergebnis

— römisch
quelle

4

Position relativ zum Element, zum Ansichtsfenster oder zum gesamten Dokument?

— James

Ich habe es mit e.layerX - e.target.offsetLeft und für Oprea mit e.offsetX

— Roman

wenn Sie es auf einer reaktionsfähigen Website erhalten möchten. Probieren Sie diesen Artikel aus. Sie können ihn auch auf reaktionsfähigen Websites herunterladen. kvcodes.com/2014/03/…

— Kvvaradha

235

Versuchen Sie, die Position des Mauszeigers relativeauf das Element (oder) einfach die Position des Mauszeigers zu ermitteln ? Probieren

Sie diese Demo aus: http://jsfiddle.net/AMsK9/

Bearbeiten:

1) event.pageX,event.pageY gibt Ihnen die Mausposition relativ Dokument!

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

2) offset() : Gibt die Versatzposition eines Elements an

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

3) position(): Es gibt Ihnen die relative Position eines Elements, dh

Angenommen, ein Element ist in ein anderes Element eingebettet

Beispiel :

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

Ref : 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 für die Beispiele ... eine Anmerkung, obwohl ich den Code auch hier hinzufügen würde, wenn Ihr Link stirbt, wird diese Frage in Zukunft unbrauchbar, ich würde den Code für jede und eine kurze Beschreibung hier

— einfügen

2

Es gibt eine einfachere Möglichkeit, den Fall von '#B': e.offsetXund e.offsetY. Ich denke, Sie möchten es bearbeiten. Ich habe die Geige hier bereits aktualisiert . Ich habe diese Lösung dank der Post gefunden, also danke.

— toto_tico

Vielen Dank, da ich persönlich mit offset () und position () verwechselt habe, kann jeder, der weitere Erläuterungen benötigt, stackoverflow.com/questions/3202008/… der Einfachheit halber lesen

— simongcc

Ich hatte ein Element an der Unterseite befestigt - das war 100% Breite, also habe ich stattdessen die Fensterbreite als posX verwendet -, also konnte ich feststellen, ob ein Benutzer auf ein "X" klickte, das mit einer: after css-Regel erstellt wurde war in der oberen rechten Ecke.

— Amurrell

Tolles Beispiel, aber es ist nicht offensichtlich, was der Unterschied zwischen .position () und .offset () ist. Sie sollten das Element #C in ein übergeordnetes div mit einer beispielhaften Position einschließen, um zu sehen, dass der Klick auf #C Ihre Mausposition innerhalb des übergeordneten Elements von #C zurückgibt, was wahrscheinlich am seltensten nützlich ist.

— 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
quelle

3

Versuche dies:

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

Hier finden Sie weitere Informationen zu DEMO

— Krunal
quelle

1

In Prozent:

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

1

Wenn MouseEvent.offsetX wird unterstützt von Ihrem Browser (alle gängigen Browser es tatsächlich unterstützen), das jQuery - Objekt Ereignisse wird diese Eigenschaft enthält.

Die schreibgeschützte Eigenschaft MouseEvent.offsetX gibt den Versatz in der X-Koordinate des Mauszeigers zwischen diesem Ereignis und der Auffüllkante des Zielknotens an.

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

— Memet Olsen
quelle

0

siehe hier Linkbeschreibung hier eingeben

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
quelle