So erhalten Sie die Koordinaten der Mausposition mit jQuery-HTML-Kenntnisse-php.cn

So erhalten Sie die Koordinaten der Mausposition mit jQuery

藏色散人

Freigeben： 2018-12-27 10:57:42

Original

13100 Leute haben es durchsucht

jq erhält die aktuellen Positionskoordinaten der Maus in Echtzeit, was über die beiden Attributmethoden von jQuery event.pageX und event erreicht werden kann .pageY. jQuery event.pageX kann verwendet werden, um die Mausposition relativ zum linken Rand des Dokuments zu ermitteln, und event.pageY kann verwendet werden, um die Mausposition relativ zum oberen Rand des Dokuments zu ermitteln.

So erhalten Sie die Koordinaten der Mausposition mit jQuery

Im Folgenden stellen wir Ihnen die jq-Methode zum Erhalten der Positionskoordinaten der Maus anhand spezifischer Codebeispiele vor.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jq获取鼠标位置坐标示例</title>
    <style type="text/css">
 *{
            margin: 0;
 }
        html, body{
            height:100%;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(function() {
            $("body").mousemove(function(event){
                var relPageCoords = "(" + event.pageX + "," + event.pageY + ")";
 $(".mouse-cords").text(relPageCoords);
 });
 });
 </script>
</head>
<body>
<p>当前鼠标的坐标为： <strong class="mouse-cords"></strong></p>
</body>
</html>

Nach dem Login kopieren

mousemove()Die Methode gibt an, dass das Mousemove-Ereignis auftritt oder festlegt, wenn sich der Mauszeiger im angegebenen Element bewegt dass die Funktion ausgeführt wird, wenn das Mousemove-Ereignis auftritt. (Im obigen Code entspricht der Parameter event der Funktion einem Objekt, das zur Bereitstellung von Informationen zur Mausposition verwendet wird.) Die Eigenschaft

event.pageX gibt die Position des Mauszeigers zurück. relativ zur linken Seite der Dokumentkante. Die Eigenschaft event.pageY gibt die Position des Mauszeigers relativ zum oberen Rand des Dokuments zurück. Die Methode

text() legt den Textinhalt des ausgewählten Elements fest oder gibt ihn zurück. (Der starke Tag wird hier verwendet, um den ausgegebenen Mauskoordinatenwert anzuzeigen)

Der Effekt ist wie folgt:

So erhalten Sie die Koordinaten der Mausposition mit jQuery

Hinweis:

1. Die Attribute event.pageX und event.pageY werden normalerweise zusammen verwendet.

2. Wenn der Benutzer die Maus um ein Pixel bewegt, tritt ein Mousemove-Ereignis auf. Die Verarbeitung aller Mousemove-Ereignisse verbraucht Systemressourcen. Bitte nutzen Sie diese Veranstaltung mit Vorsicht.

In diesem Artikel geht es um die Methode von jq, die aktuellen Positionskoordinaten der Maus in Echtzeit zu ermitteln. Ich hoffe, dass sie für Freunde in Not hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die Koordinaten der Mausposition mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!