Question 167675 in Javascript Question posted in
A very good W3school tutorial can be found here.

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 😺.

Tags:

3

Answers


  1. 0

    This should help you

    event.stopPropagation();

    enter link description here

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search