DOM Events: How to target only one event

JavaScript
1

In the picture below, I want to open a modal when a user clicks anywhere within in the yellow block, including if they click on the white ‘+’ sign. The problem is, the click event happens on a different target depending on whether the user clicks on the yellow portion, or on the white ‘+’ sign.

In my JavaScript code, I have been handing it like this so far, but I wonder if there is a better, shorter way of doing this that doesn’t require the II operator:

function openModal(e) {
  if (e.target.classList.contains('project-box__picture-box') || e.target.classList.contains('project-box__icon')) {
    modalEl.classList.add('open');
  }
}

03%20PM
03%20PM1056×1272 137 KB

2

Put them both inside one div and place the click event on the wrapper div.

<div class="wrapper_div">
   <div></div>
   <i></i>
</div>

or

move the <i> inside the <div>