Wie führt man mit jQuery eine Click-and-Hold-Operation innerhalb eines Elements durch?
Bei einem gegebenen HTML-Element besteht die Aufgabe darin, ein Element in einem Dokument einige Sekunden lang anzuklicken und zu halten, um die Operation mit jQuery auszuführen.
Sich nähern:
- Wählen Sie ein HTML-Element aus.
- Fügen Sie diesem Element den Ereignis-Listener hinzu und fügen Sie einen timeOut-Timer für dieses Ereignis hinzu.
- Wenn dieses Ereignis einige Sekunden lang aktiv ist, lösen Sie ein anderes Ereignis aus, um zu identifizieren, dass das Ereignis eintritt.
Beispiel 1: In diesem Beispiel löst das Klicken und Halten innerhalb des div für 2 Sekunden ein anderes Ereignis aus, das einfach dieses Ereignis ausgibt.
<!DOCTYPE HTML> <html> <head> <title> How to perform click-and-hold operation inside an element using jQuery ? </title> <style> #div { background: green; height: 100px; width: 200px; margin: 0 auto; color: white; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;"> </p> <div id = "div"> Div Element. </div> <br> <p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p> <script> $('#GFG_UP').text("Click and Hold inside the" + " div for 2 seconds"); var tId = 0; $('#div').on('mousedown', function() { tId = setTimeout(GFG_Fun, 2000); }).on('mouseup mouseleave', function() { clearTimeout(tId); }); function GFG_Fun() { $('#GFG_DOWN').text("Click and Hold for 2 " + "seconds, done."); } </script> </body> </html>
Ausgabe:
- Bevor Sie auf die Schaltfläche klicken:
- Nach Klick auf den Button:
Beispiel 2: In diesem Beispiel löst das Klicken und Halten innerhalb des Hauptdokuments für 2 Sekunden ein anderes Ereignis aus, das einfach dieses Ereignis ausgibt. Dieses Beispiel trennt die Logik von mousedown- und mouseup- Ereignissen.
<!DOCTYPE HTML> <html> <head> <title> How to perform click-and-hold operation inside an element using jQuery ? </title> <style> #div { background: green; height: 100px; width: 200px; margin: 0 auto; color: white; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;"> </p> <div id = "div"> Div Element. </div> <br> <p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p> <script> $('#GFG_UP').text("Click and Hold inside the" + " div for 2 seconds"); var tId = 0; $("#div").mousedown(function() { tId = setTimeout(GFG_Fun, 2000); return false; }); $("#div").mouseup(function() { clearTimeout(tId); }); function GFG_Fun() { $('#GFG_DOWN').text("Click and Hold for 2 " + "seconds, done."); } </script> </body> </html>
Ausgabe:
- Bevor Sie auf die Schaltfläche klicken:
- Nach Klick auf den Button: