Jquery Extension to Handle Clicks and Double Clicks

Developer
Alex Vazquez
Size
2,407 Kb
Views
22,264
  1. Jquery Extension to Handle Clicks and Double Clicks Previews
  2. Jquery Extension to Handle Clicks and Double Clicks HTML Codes
  3. Jquery Extension to Handle Clicks and Double Clicks CSS Codes
  4. Jquery Extension to Handle Clicks and Double Clicks JS Codes

How do I make an jquery extension to handle clicks and double clicks?

This Jquery extension allows you to handle single and double clicks on the same element correctly.. What is a jquery extension to handle clicks and double clicks? How do you make a jquery extension to handle clicks and double clicks? This script and codes were developed by Alex Vazquez on 10 September 2022, Saturday.

Jquery Extension to Handle Clicks and Double Clicks Previews
IQ Test

Jquery Extension to Handle Clicks and Double Clicks - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery Extension to Handle Clicks and Double Clicks</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>JQuery Handle Single & Double Clicks on Same Element</h1>
<br />
<h1 id="clickme">CLICK ME ONCE OR TWICE</h1>
<h1 id="result">Result of Click1</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery Extension to Handle Clicks and Double Clicks - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Bevan);
body { font-family: 'Bevan', cursive; background-color: #eddfed; margin: 50px;
}
h1 { padding: 25px; background-color: #d7dadb; text-align: center; border: 1px solid grey;
}

Jquery Extension to Handle Clicks and Double Clicks - Script Codes JS Codes

$.fn.singleAndDouble = function(singleClickFunc, doubleClickFunc) { // This means it'll take a minimum of 200ms to take the single // click action. If it's too short the single and double actions // will be called. // The default time between clicks on windows is 500ms (http://en.wikipedia.org/wiki/Double-click) // Adjust accordingly. var timeOut = 200; var timeoutID = 0; var ignoreSingleClicks = false; this.on('click', function(event) { if (!ignoreSingleClicks) { // The double click generates two single click events // and then a double click event so we always clear // the last timeoutID clearTimeout(timeoutID); timeoutID = setTimeout(function() { singleClickFunc(event); }, timeOut); } }); this.on('dblclick', function(event) { clearTimeout(timeoutID); ignoreSingleClicks = true; setTimeout(function() { ignoreSingleClicks = false; }, timeOut); doubleClickFunc(event); });
};
var singleClickCalled = false;
$('#clickme').singleAndDouble( function(event) { singleClickCalled = true; $('#result').html('Single Click Captured'); setTimeout(function() { singleClickCalled = false; }, 300); }, function(event) { if (singleClickCalled) { // This is actually an error state // it should never happen. The timeout would need // to be adjusted because it may be too close $('#result').html('Single & Double Click Captured'); } else { $('#result').html('Double Click Captured'); } singleClickCalled = false; }
);
Jquery Extension to Handle Clicks and Double Clicks - Script Codes
Jquery Extension to Handle Clicks and Double Clicks - Script Codes
Home Page Home
Developer Alex Vazquez
Username quezo
Uploaded September 10, 2022
Rating 3.5
Size 2,407 Kb
Views 22,264
Do you need developer help for Jquery Extension to Handle Clicks and Double Clicks?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Vazquez (quezo) Script Codes
Name
Default DC.js Template
A Pen by Alex Vazquez
A Pen by Alex Vazquez
Maximized TextArea
A Wufoo Form
DC.js Example Pie Chart
Simple Redux, React Example
Redux Template
Code Pen Link Generator
Event Bus Example using JQuery.
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!