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>