Html - Why event listener isn't working even though I selected right element?

NadjaPopovic
July 8, 2023
139 views
3 votes
3 Answers

I added an event listener to the "learn more" div and it doesn’t work. When I inspected that div element and went to the "Event Listeners" tab, it shows that it has the event listener attached to it. I thought the "vert-gradient" div (see code) prevents it from being triggered, but when I deleted it, the problem remained.

let lms = document.querySelectorAll(".lm");
lms.forEach((lm) => {
  console.log(lm); //this works
  lm.addEventListener("click", (event) => {
    event.preventDefault();
    console.log("click!"); //this doesn't work!
  });
});

.border {
  width: 354px;
  height: 404px;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(212, 119, 66, 1) 81%);
  border-radius: 27px;
  position: relative;
  z-index: -3;
  pointer-events: none;
}

.prod {
  width: 350px;
  height: 400px;
  border-radius: 25px;
  margin: 2px;
  background-repeat: no-repeat;
  position: relative;
  z-index: -2;
  pointer-events: none;
  background: #0000ff;
}

.prod h2 {
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  bottom: 78px;
}

.prod h3 {
  color: #d47742;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  bottom: 32px;
}

.prod h2,
.prod h3 {
  position: absolute;
  left: 30px;
}

.vert-gradient {
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(19, 19, 19, 0.7) 55%,
    rgb(19, 19, 19) 84%
  );
  position: absolute;
  width: 350px;
  height: 400px;
  top: 0;
  z-index: -1;
  border-radius: 25px;
  pointer-events: none;
}

.lm {
  height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  bottom: 5px;
}

.lm span {
  line-height: 24px;
  font-size: 20px;
}

.lm img {
  width: 30px;
}

<div class="border" cat="b">
  <div class="prod">
    <h2>Bread</h2>
    <h3>1,50€</h3>
    <div class="lm">
      <span>Learn More</span>
    </div>
    <div class="vert-gradient"></div>
  </div>
</div>

I tried to remove the "border" div but the problem remained. I tried to attach the event listener to the "prod" div, but it isn’t triggered either. event.preventDefault(); doesn’t do anything.

Answers

Not sure what you are trying to achieve with this HTML structure and CSS . It’s a bit odd.

But first-of-all you are using pointer-events:none on both of your item’s ancestors. Which disables the click event on the lm child.

Second, you use z-index on your ancestors which is lower than 0 and lower than the vert-gradient z-index. That means, the vert-gradient will go on top.

Without any other context on what you are trying to achieve. Here’s a working example that shows exactly why what I said above is making your element not clickable.

Again, you should rethink your CSS and HTML structure because the ones you have are not correct at all.

let lms = document.querySelectorAll(".lm");
lms.forEach((lm) => {
  console.log(lm); //this works
  lm.addEventListener("click", (event) => {
    event.preventDefault();
    event.stopPropagation(); // add this if you don't want ev bubbling up
    console.log("click!"); //this doesn't work!
  });
});

.border {
  width: 354px;
  height: 404px;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(212, 119, 66, 1) 81%);
  border-radius: 27px;
  position: relative;
}

.prod {
  width: 350px;
  height: 400px;
  border-radius: 25px;
  margin: 2px;
  background-repeat: no-repeat;
  position: relative;
  background: #0000ff;
}

.prod h2 {
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  bottom: 78px;
}

.prod h3 {
  color: #d47742;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  bottom: 32px;
}

.prod h2,
.prod h3 {
  position: absolute;
  left: 30px;
}

.vert-gradient {
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(19, 19, 19, 0.7) 55%,
    rgb(19, 19, 19) 84%
  );
  position: absolute;
  width: 350px;
  height: 400px;
  top: 0;
  border-radius: 25px;
  pointer-events: none;
}

.lm {
  height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  bottom: 5px;
}

.lm span {
  line-height: 24px;
  font-size: 20px;
}

.lm img {
  width: 30px;
}

<div class="border" cat="b">
  <div class="prod">
    <h2>Bread</h2>
    <h3>1,50€</h3>
    <div class="lm">
      <span>Learn More</span>
    </div>
    <div class="vert-gradient"></div>
  </div>
</div>

It is not working properly because of your CSS. You have set pointer-events both elements div.border and div.prod as none which is deactivating the click-target that is pointer events will not work on both div and setting the z-index of both the div is keeping them behind the body element in stack order of element due to which click is not happening on .lm div but on body.

To fix this, remove pointer-events from css and set z-index of .border as 1 and .prod as 2.

See demo below:-

let lms = document.querySelectorAll(".lm");
lms.forEach((lm) => {
  lm.addEventListener("click", (event) => {
    event.preventDefault();
    console.log("click!");
  });
});

.border {
  width: 354px;
  height: 404px;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(212, 119, 66, 1) 81%);
  border-radius: 27px;
  position: relative;
  z-index: 1;
}

.prod {
  width: 350px;
  height: 400px;
  border-radius: 25px;
  margin: 2px;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
background: #0000ff;
}

.prod h2 {
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  bottom: 78px;
}

.prod h3 {
  color: #d47742;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  bottom: 32px;
}

.prod h2,
.prod h3 {
  position: absolute;
  left: 30px;
}

.vert-gradient {
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(19, 19, 19, 0.7) 55%,
    rgb(19, 19, 19) 84%
  );
  position: absolute;
  width: 350px;
  height: 400px;
  top: 0;
  z-index: 3;
  border-radius: 25px;
  pointer-events: none;
}

.lm {
  height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  bottom: 5px;
}

.lm span {
  line-height: 24px;
  font-size: 20px;
}

.lm img {
  width: 30px;
}

<html>
<body>
<div class="border" cat="b">
    <div class="prod">
        <h2>Bread</h2>
            <h3>1,50€</h3>
            <div class="lm">
              <span>Learn More</span>
            </div>
        <div class="vert-gradient"></div>
     </div>
 </div>
</body>
</html>

It was a CSS problem, preventing the click from hitting the intended target. I started paring it away til I got to this working example:

let lms = document.querySelectorAll(".lm");
lms.forEach((lm) => {
  console.log(lm); //this works
  lm.addEventListener("click", e => {
    e.preventDefault();
    console.log("click!"); //this doesn't work!
  });
});

.border {
  width: 354px;
  height: 404px;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(212, 119, 66, 1) 81%);
  border-radius: 27px;
}

.prod {
  width: 100%;
  height: 100%;
  position: relative;
  top: 7px;
  left: 7px;
  border-radius: 25px;
  background: #0000ff;
}

.prod h2 {
  font-size: 40px;
}

.prod h3 {
  font-size: 30px;
 }

.lm{
 background: rgba(212, 119, 66, 1);
}

.lm-text{
  font-size: 20px;
  display: inline-block;
 
  cursor: pointer;
}

  <div class="border" cat="b">
    <div class="prod">
      <h2>Bread</h2>
      <h3>1,50€</h3>
      <div class="lm">
        <span class="lm-text">Learn More</span>
      </div>
    </div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why event listener isn't working even though I selected right element?

Answers