jquery simuliert die Mauszeiger-Stopp-Bewegung event

jquery simuliert die Mauszeiger-Stopp-Bewegung event_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:20:28

Original

1343 Leute haben es durchsucht

Das Beispiel in diesem Artikel erklärt den Beispielcode des Ereignisses, das durch das Anhalten der Mauszeigerbewegung ausgelöst wird. Es wird zu Ihrer Information mit allen geteilt. Der spezifische Inhalt ist wie folgt Es gibt verschiedene integrierte Mausereignisse in js, z. B. Klickereignisse, Mausbewegungsereignisse usw., aber es gibt kein Ereignis, bei dem der Mauszeiger aufhört, sich zu bewegen. Ich hoffe, dass dies einige Vorteile bringen kann Freunde, die Hilfe brauchen.
Der Code lautet wie folgt:

<html>
<head>
<meta charset="gb2312">
<title>鼠标指针停止运动</title>
<style type="text/css">
#top
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
#bottom
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
(function($){
 $.fn.moveStopEvent = function(callback){
  return this.each(function(){
   var x = 0,
   y = 0,
   x1 = 0,
   y1 = 0,
   isRun = false,
   si,
   self = this;
 
   var sif = function(){
    si = setInterval(function(){
     if(x == x1 && y ==y1)
         {
      clearInterval(si);
      isRun = false;
      callback && callback.call(self);
     }
     x = x1;
     y = y1;
    }, 500);
   }
 
   $(this).mousemove(function(e){
    x1 = e.pageX;
    y1 = e.pageY;
    !isRun && sif(), isRun = true;
   }).mouseout(function(){
    clearInterval(si);
    isRun = false;
   });
  });
 }
})(jQuery);
 
$(function(){
 $("#top,#bottom").moveStopEvent(function(){
  alert($(this).attr("id"));
 })
})
</script>
 
</head>
<body>
<div id="top">脚本之家一</div>
<br/>
<div id="bottom">脚本之家二</div>
</body>
</html>

Nach dem Login kopieren

Der obige Code realisiert unsere Anforderungen. Wenn sich der Mauszeiger im Div nicht mehr bewegt, wird der ID-Attributwert des entsprechenden Div angezeigt. Hier finden Sie eine Einführung in den Implementierungsprozess.

Codekommentare: 1.(function($){}(jQuery), deklarieren Sie eine anonyme Funktion und führen Sie diese Funktion aus. Der Parameter ist ein jQuery-Objekt.
2.$.fn.moveStopEvent=function(callback{}), fügen Sie dem jQuery-Instanzobjekt eine Funktion hinzu.
3. Geben Sie this.each (function () {} zurück, durchlaufen Sie jedes DOM-Elementobjekt in der jQuery-Objektsammlung und verwenden Sie dieses Objekt als Kontext zum Ausführen der Funktion. Dies bedeutet, dass dies in der Funktion auf jedes DOM-Objekt zeigt. .
4.Var x = 0, y = 0, deklarieren Sie die Variablen x und y und weisen Sie den Anfangswert 0 zu, der zum Speichern der vorherigen Koordinate des Mauszeigers verwendet wird.
5.Var x1 = 0, y1 = 0, deklarieren Sie die Variablen x1 und y1 und weisen Sie den Anfangswert 0 zu, der zum Speichern der aktuellen Koordinaten des Mauszeigers verwendet wird.
6.var isRun = false, deklariert eine Markierung, die angibt, ob sich der Mauszeiger bewegt.
7.var timer=null, deklarieren Sie eine Markierung als Rückgabewert der Timer-Funktion.
8.var self=this, weisen Sie der Variablen self die Referenz des aktuellen DOM-Objekts zu.
9.var sif=function(){}, deklariert eine Funktion, um zu bestimmen, ob der Mauszeiger aufhört, sich zu bewegen.
10.timer=setInterval(function(){},500), führt die Funktion alle 500 Millisekunden aus. Wenn der Mauszeiger seine Position nicht innerhalb von 500 Millisekunden ändert, wird davon ausgegangen, dass er sich nicht mehr bewegt.
11.x = x1, y = y1, speichern Sie die aktuellen Koordinaten des Mauszeigers in x und y.
12.$(this).mousemove(function(e){}), registrieren Sie die Mousemove-Ereignisverarbeitungsfunktion für das aktuelle Objekt.
13.x1 = e.pageX, speichere die aktuelle Abszisse des Mauszeigers in x1.
14.y1 = e.pageY, speichere die aktuelle Maus-Ordinate in y1.
15.!isRun && sif(), isRun = true, wenn sich die aktuelle Maus nicht bewegt, führen Sie die Funktion sif() aus und setzen Sie isRun auf true. Das heißt, wenn sich der Mauszeiger weiter bewegt, ist garantiert, dass die Funktion sif() nur einmal ausgeführt wird, andernfalls werden möglicherweise viele dieser Funktionen ausgeführt.
16.mouseout(function(){}) registriert die Mouseout-Ereignisverarbeitungsfunktion. Dies ist natürlich ein Kettenaufruf.
17.clearInterval(timer), stoppt die Ausführung der Timer-Funktion.
18.isRun = false, setzen Sie den Wert der Variablen auf false, um anzuzeigen, dass sich die Maus nicht mehr bewegt.

Das Obige ist der gesamte Inhalt dieses Artikels mit detaillierten Codekommentaren. Ich hoffe, dass er für alle hilfreich ist, um Mausereignisse zu lernen.