Javascript 如何在移动设备中使用JAVASSCRIPT移除点击时的焦点悬停状态

const closeButton = document.querySelector('.main .explanation p a');
const explanation = document.querySelector('.main .explanation');
const addActiveClass = (e) => {
    explanation.classList.add('active');
}
const removeActiveClass = (e) => {
    explanation.classList.remove('active');
}

closeButton.addEventListener('click', toggleExplanation, false);
explanation.addEventListener('mouseenter', addActiveClass);
explanation.addEventListener('mouseleave', removeActiveClass);
explanation.addEventListener('touchstart', addActiveClass);

function toggleExplanation(event) {
  explanation.classList.toggle('active');
  event.preventDefault();
}

document.addEventListener('click', function(e) {

  // Check if the clicked element is outside the target element
  if (!explanation.contains(e.target)) {
    removeActiveClass(e)
  }
});

.main {
  .explanation {
    &::before {
      content: "[hover to show]";
    }

    p {
      background: #edf6ff;
      display: none;
      margin: 0;
      padding: 12px;
      position: relative;
      width: 200px;

      a {
        content: '[close]';
        outline: 5px solid blue;
        position: absolute;
        top: -5px;
        right: -20px;
      }
    }

    &.active p {
      display: block;
    }
  }
}

<div class="main">
  <div>
    <h5>h5 text</h5>
      <div class="explanation">
        <div>
          <p>An explanatory paragraph <a>x</a>
          </p>
        </div>
      </div>
  </div>
</div>