Html Question posted in
Some basic documentation can be found here.

Html – How to use JavaScript to prevent the click events on child elements and inhibit changes to the mouse cursor style

I hope that only the click events within the areas of .box1 and .box2 will be prevented, and the mouse cursor style will not change. My current code is as follows, where I check the value of e.target, but this also prevents click events within the .boxs area. Additionally, I’ve set pointer-events to none, but the mouse cursor style still changes. I noticed that there’s a similar question, but there isn’t a better answer for my issue.
56886001

const wrap = document.querySelector('.wrap');

wrap.addEventListener('click', (event) => {
  if (event.target === wrap) {
    console.log('wrap');
  }
});
.wrap {
  width: 500px;
  height: 500px;
  background-color: lightcyan;
  cursor: pointer;
}

.boxs {
  width: 300px;
  border: 2px solid black;
}

.box1 {
  width: 250px;
  height: 250px;
  background-color: bisque;
  pointer-events: none;
}

.box2 {
  width: 250px;
  height: 250px;
  background-color: azure;
  pointer-events: none;
}
<div class="wrap">
  <div class="boxs">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Here’s something might work for you:

    1. Remove pointer-events: none; from both boxes, since you do want them to capture click events, so you could block them.

    2. Give both boxes cursor: initial so the cursor stays normal state when hovering.

    3. Add click event listeners to both boxes and event.stopPropagation(), so the click event won’t bubble to .wrap.

    const wrap = document.querySelector('.wrap');

wrap.addEventListener('click', (event) => {
  console.log('wrap');
});

document.querySelectorAll('.boxs > *').forEach(box => box.addEventListener('click', event => {
  event.stopPropagation();
}));
    .wrap {
  width: 500px;
  height: 500px;
  background-color: lightcyan;
  cursor: pointer;
}

.boxs {
  width: 300px;
  border: 2px solid black;
}

.box1 {
  width: 250px;
  height: 250px;
  background-color: bisque;
}

.box2 {
  width: 250px;
  height: 250px;
  background-color: azure;
}

.boxs > * {
  cursor: initial;
}
    <div class="wrap">
  <div class="boxs">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    you could not add pointer-events: none;,because the event also will be triggered on div (boxs),
    you need judge the event target to prevent want you want

    <style>
  .wrap {
    width: 500px;
    height: 500px;
    background-color: lightcyan;
    cursor: pointer;
  }
  
  .boxs {
    width: 300px;
    border: 2px solid black;
  }
  
  .box1 {
    width: 250px;
    height: 250px;
    background-color: bisque;
    cursor: auto;
  }
  
  .box2 {
    width: 250px;
    height: 250px;
    background-color: azure;
    cursor: auto;
  }
</style>
<div class="wrap">
  <div class="boxs">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
<script>
  const wrap = document.querySelector('.wrap');
  wrap.addEventListener('click', (e) => {
    if (event.target.className === 'box1' || event.target.className === 'box2') {
      return
    }
    console.log('wrap');
  })
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search