CODEWITHSUNDEEP
javascriptreactjsvue.js
Ahmed Nasser
Ahmed Nasser

Reputation: 3

Double click event function javascript

the function working well, but when I click on first element and second element then first once again, He skips the highlight and moves to the second event, remove direct.

HTML

<button class="cancelBtn">Cancel highlighting</button>
    <div>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
    </div>
    <style>
        .btn.click {
            background-color: red;
        }
    </style>

JS

function doubleClickEvenElements(eventElements, cancelHighlightingElement) {
  eventElements.forEach(eventElement => {

    let count = 0;

    eventElement.addEventListener("click", element => {

      element.target.classList.add("element");
      eventElements.forEach(ele => {ele.classList.remove("click");});
      element.target.classList.add("click");

      count++;

      if (count == 2) {

        element.target.remove();
        count = 0;

      };

    });

    cancelHighlightingElement.addEventListener("click", btn => {

      count = 0;
      eventElements.forEach(ele => {ele.classList.remove("click");});

    });

  });

};

let eventElements = document.querySelectorAll("div .btn");
let cancelHighlighting = document.querySelector(".cancelBtn");

doubleClickEvenElements(eventElements, cancelHighlighting);

you can try the code on CodePen

in the second click on the element, I need it to make highlight first then next click will delete it from DOM, but it deletes direct without highlight first.

I'm sorry about my bad explain, I hope you are understanding what I'm saying 😺.

Upvotes: 0

Views: 154

Answers (3)

Klaas Leussink
Klaas Leussink

Reputation: 2757

In general, I would advise against counting clicks to check for double-clicking, as this would also apply to really slow double-clicks or clicks that (such as your example) first clicked element A, then B, then A again.

I'd recommend checking the 'last clicked' time, and if that's greater than, say, 500 ms, do not consider this click a (second, thus) double click.

Here's an example, using 500ms as a threshold:

myDoubleClickElement.addEventListener('click', (e) => {
    if (new Date().getTime() - (e.target._lastTouch || 0) > 500) {
        e.target._lastTouch = new Date().getTime();
        e.preventDefault(); //does not allow the action to proceed
    } else {
        //allows the action to proceed
        console.log(`Double click on ${e.target}`);
    }
});

Here's a demo

document.getElementById('doubleclick').addEventListener('click', (e) => {
    if (new Date().getTime() - (e.target._lastTouch || 0) > 500) {
        //not a doubleclick
        e.target._lastTouch = new Date().getTime();
        e.target.classList.remove("click");
        e.preventDefault(); 
    } else {
        //a doubleclick
        e.target.classList.add("click");
        console.log(`Double click on ${e.target}`);
    }
});
.click {
 background-color: red;
 color: white;
}
<button id="doubleclick">Double click me</button>

Upvotes: 1

Florent M.
Florent M.

Reputation: 1527

This is because you never reset the count variable of a clicked button when another one is clicked, so the second time you click a button, the count value will be directly 2.

To fix this I would advise you to use the "click" class as an indicator if the button has been clicked or not. You will then only have to check if the class of the clicked button is present, and if so delete it (and add the class if not)

To check if an element has the class you can use:

const isClicked = element.target.classList.contains("click")

You would need to do this check before removing the "click" class on all the elements

Upvotes: 0

Yasin Khan
Yasin Khan

Reputation: 93

This should help you

event.stopPropagation();

enter link description here

Upvotes: 0

Related Questions