Ich habe heute auf Twitter einen augenscheinlich interessanten Link gefunden. Auf der Seite wird beschrieben, wie man mit Javascript die Distanz zwischen Mauszeiger und einem Element berechnet. Da ich das interessant fand, schaute ich mir die Sache mal an.
Was man dort findet ist (mal wieder) ein triviales Script, das mit jQuery implementiert wurde. Der ganze Zauber entsteht im Artikel folgendermaßen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| (function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
$(document).mousemove(function(e) {
distance = calculateDistance($element, e.pageX, e.pageY);
$distance.text(distance);
});
})();
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
} |
Funktioniert prima, keine Frage. Jetzt stellt sich aber die Frage: Warum zum Teufel, hat man hier jQuery benutzt? Ich habe das Gleiche (ok, bis auf die Ermittlung des Span-Elements zur Anzeige der Distanz) mal ohne jQuery erstellt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| (function() {
var mX, mY, distance,
distanceE = document.getElementById('distance'),
elementE = document.getElementById('element');
document.onmousemove = function(e) {
distance = calculateDistance(elementE, e.pageX, e.pageY);
distanceE.innerText = distance;
};
})();
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft+(elem.offsetWidth/2)), 2) + Math.pow(mouseY - (elem.offsetTop+(elem.offsetHeight/2)), 2)));
} |
Demo auf jsFiddle
Es ist immer wieder traurig anzuschauen, dass selbst die kleinsten Dinge mit jQuery erklärt werden. Leute, lernt Javascript. Lernt zu verstehen, wie jQuery arbeitet, bevor alles damit implementiert wird. Das oben stehende Beispiel ist auch ohne jQuery verständlich und zeigt zu dem noch, wie man Elemente selektiert und Events benutzt.