✔ jQuery - onclick

OneGunner · 10. Februar 2009

Code:

PHP:

$.fn.x = function(n) {
var result = null;
this.each(function() {
var o = this;
if (n === undefined) {
var x = 0;
if (o.offsetParent) {
while (o.offsetParent) {
x += o.offsetLeft;
o = o.offsetParent;
}
}
if (result === null) {
result = x;
} else {
result = Math.min(result, x);
}
} else {
o.style.left = n + 'px';
}
});
return result;
};

// Quelle: http://osdir.com/ml/lang.javascript.jquery/2006-10/msg00242.html

$(document).ready(function(){
    $("#box").click(function () {
        alert($(this).x());
    });
});

Leider bekomme ich die Position des Elements im Bodybereich angezeigt,
aber ich würde gerne die relative Position vom Element selbst bekommen.
Also ich hab eine DIV-Box die 500px breit und 250px hoch ist
und beim draufklicken würde ich gerne die relative Mausposition
vom Startpunkt der Box aus erhalten.

Quaese · 11. Februar 2009

Hi,

überwache den click-Event für das Dokument. Tritt er ein, prüfst du, ob das auslösende Element das geforderte DIV-Element ist. Im Erfolgsfall ermittelst du die Klickkoordinaten (über das Event-Objekt) und subtrahierst davon die Koordinaten des DIV-Elements.

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(document).ready(function(){
  $(document).click(function(objEvt) {
    if(objEvt.target.id == "tester"){
      alert("x = " + (objEvt.pageX - $('#tester').offset().left) + "\ny = " + (objEvt.pageY - $('#tester').offset().top));
    }
  });
});
 //-->
</script>
</head>
<body>
<div style="padding: 30px; margin: 50px; border: 1px solid #f00;">
  <div style="width: 100px; height: 100px; border: 1px solid #0f0;"></div>
  <div id="tester" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
</div>
</body>
</html>

Ciao
Quaese

✔ jQuery - onclick

OneGunner

Quaese

Moderator

Neue Beiträge