0

I have a list item that already has an onclick event:

        const li = document.createElement("li");
        li.textContent = list.title;
        li.addEventListener("click", async function(e) {
            window.location.replace("http://localhost:3000/list.html?title=" + e.target.textContent);
        })

Now I added a button to the list item:

        const trash = document.createElement("button");
        trash.style.float = "right";
        trash.addEventListener("click", function(e) {
            alert("test")
        })
        li.appendChild(trash);

The Problem is that when I click on the button it fires the onclick event of my button, but afterwards the onclick event of the list item is fired aswell. I want my programm to only process one of the events depending on the element I clicked at.

Could anyone help me out?

Elias
  • 13
  • 2
  • 1
    `click` events bubble. You can `e.stopPropagation()` in the trash click event handler to stop this behavior. – Taplar Nov 03 '20 at 16:21
  • Also side note; you don't need `async` on the event handler for the li click. Doesn't really make sense. – Taplar Nov 03 '20 at 16:21

0 Answers0