it-swarm.com.de

JQuery verwenden, um Klickkoordinaten für das Zielelement zu erhalten

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 auf der # Suchleiste zum Zeitpunkt des Klickens finden. Ich hätte gedacht, dass der obige Code funktionieren sollte, aber es gibt ein falsches Ergebnis 

100
Roman

Versuchen Sie, die Position des Mauszeigers relative auf element (oder) einfach auf die Position des Mauszeigers zu setzen

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


Bearbeiten:

1) event.pageX, event.pageY gibt Ihnen das relative Dokument der Mausposition!

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(): Gibt die relative Position eines Elements an, d. H.

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));
    });
});
219
user372551
$('#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);
});
13
Nisar

Versuche dies:

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

Hier finden Sie mehr info mit DEMO

3
Krunal

Wenn MouseEvent.offsetX von Ihrem Browser unterstützt wird (alle großen Browser unterstützen dies tatsächlich), enthält das jQuery Event-Objekt diese Eigenschaft.

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

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

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+'%');
});
1
l2aelba

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