Is there a way to change the single click event to a double click? It needs to register as a double click if the second click occurs within 300 milliseconds.
Is there a way to change the single click event to a double click? It needs to register as a double click if the second click occurs within 300 milliseconds.
If you're looking for a solution, here's one that may do the trick. You can save the first click and then set a timer to reset that click if no other click follows.
There are probably more efficient ways to tackle this issue, but the following code should get the job done:
let clicked = false;
const timeout = 300;
let timer;
function onClickHandler(e) {
console.log('click');
document.querySelector('#result').innerText = '';
if (timer) window.clearTimeout(timer);
if (!clicked) {
console.log('first time');
clicked = true;
timer = window.setTimeout(() => clicked = false, timeout);
} else {
console.log('double click');
clicked = false;
document.querySelector('#result').innerText = 'Double click!';
}
}#result{background:red;}<div onclick="onClickHandler(event)">Click me twice</div>
<div id="result"></div>Below, you will find an illustration utilizing the Timeout feature in JavaScript
// defining the duration for double clicking
const doubleClickTimeout = 300
// a variable to track our timeout pointer
let timer = undefined
// function to clear the timeout/timer and variable
let clear = () => {
if (timer) clearTimeout(timer)
timer = undefined
}
// initiates the timeout/timer
let clickStart = () => {
timer = setTimeout(clear, doubleClickTimeout)
}
// identifies the area to be monitored
const doubleClick = document.getElementById("doubleClick")
// adds an onclick event to the doubleClick element pointing to the designated div
doubleClick.onclick = () => {
// if timer is not undefined, it indicates a double click has occurred
if (timer) {
console.log("double click detected")
// invoke the clear function to reset the timer
clear()
} else {
// invoke the clickStart function to initiate a timer
clickStart()
}
}<div id="doubleClick">this is a clickable area with custom double clicking</div>I'm currently working on a function that pulls data from an API to convert PowerPoint presentations into base64 strings. Once I receive the response object, my goal is to seamlessly insert the slides into the existing presentation, exactly after the s ...
Currently, I am utilizing Lodash _.isEqual for performing a deep comparison between a local JavaScript object and another JavaScript object fetched through angular $get. The initial code indicates that the objects are not the same: $get({...}, function ( ...
How can I update a variable in an AngularJS controller using JavaScript when a specific HTML element is clicked? For instance: angular.module('app',[]) .controller('appController', function($scope, $http){ $scope.on ...
Currently, I am working on automating a login page using WebDriverIO for UI Automation. After clicking the Login button, a request to *.com/user/login is triggered in the background. I need to capture this call's response in order to obtain a token r ...
When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...
I need my function to properly format a number or string into a decimal number with X amount of digits after the decimal point. The issue I'm facing is that when I pass 3.0004 to my function, it returns 3. After reviewing the documentation, I realized ...
I encountered an error in my code that breaks the functionality when checked using console.log. var map = L.map('map').setView([0, 0], 2); <?php $classesForCountries = []; if (have_posts()) : while (have_posts()) : the_post(); ...
In my profile.hbs file, I am utilizing Express, Node, and MySQL for handling my database operations. If I aim to showcase the username of the currently logged-in user, where should I perform the query and how exactly? Should it be inside the app.js, inde ...
After re-rendering a partial with js.erb, why do click events stop working on the DOM? Following guidance from this tutorial, I successfully re-rendered a js.erb partial. However, when I attempt to trigger click events on buttons after clicking "cat.name" ...
Within my Angular4 application, I am faced with a challenge involving a large list of li elements. The browser struggles to handle the thousands of li's being displayed when the user interacts with the ul element. This results in slow loading times an ...
There's an issue with the timing of my function that runs inside another function. It seems like sometimes the ajax call to the server isn't completed before the function is called. function obtainPlans(row, user, id, type) { $.get( "/ ...
I have a menu loading in an iframe with links using # like http://<location>/page.html#part1. When I click inside the iframe, the entire page outside of the iframe scrolls to the location of #. How can I stop this from happening? I only want the me ...
I currently have a setup like this: Parent Component: <TransitionGroup> { items.map((child, index) => { // do something return ( <CSSTransition key={index} nodeRef={items.nodeRef} timeout={1000} classNames={'item ...
When my Mapbox map loads, I am experiencing issues with it only rendering partially. It seems that adjusting the width of the browser or inspecting the page will cause the map to snap into place and display correctly. To demonstrate this problem, I created ...
In my React Native project, I need to pass a string value from one component to another. The different options for the value can be found in the ScannerAction object: export const ScannerAction = { move: 'move', inventory: 'inventory&apo ...
HTML <input type="button" id="1" class="add" value="+" title="Add" onclick="set(this);"/> JS function set(obj){ alert(obj.id); } The code snippet provided above seems to have an issue. My Requirement I am looking for a solution that allows ...
Currently, I have an if statement with over 100 different conditions. Right now, I am using a structure similar to this... $('select').on("change",function(){ if( $(this).val() === 'tennis' ) { $('.sport').val( ...
I am attempting to open a new window in the Android browser using "_blank". I have set up an event listener for this purpose. mWebView.getSettings().setSupportMultipleWindows(true); mWebView.setWebChromeClient(new WebChromeClient() { ...
If I use a reactive form-array, can I dynamically add 2 questions and 3 or 4 choices? Question 1: How do I set the radio button text dynamically using form-array? Question 2: Now, I'm attempting to retrieve only the selected choice ID corresponding ...
I am facing an issue with my saved search in the beforeLoad userevent script. After adding a filter and running the search, Netsuite throws an UNEXPECTED_ERROR. Any ideas on what might be causing this error? var poRec = context.newRecord; var countIt ...