<div class="l-wrapper">
  <button class="c-button">
    click!!
  </button>

  <div class="info-window">
    <p class="info-window__text"></p>
  </div>

</div>

.l-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #eee;
  height: 300px;
}

.c-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #0093DB;
  height: 60px;
  width: 280px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

.info-window {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 5px;
  background: #fff;
  text-align: center;
  width: 70%;
  margin-top: 60px;
}

document.addEventListener('click', (e) => {
  if(!e.target.closest('.c-button')) {
    console.log("外側やで")
    document.querySelector('.info-window__text').innerHTML = "ボタン以外をクリックしたやで"
  } else {
    console.log("内側やで")
    document.querySelector('.info-window__text').innerHTML = "ボタンをクリックしたやで"
  }
})