如何使用 javascript 删除移动设备上点击时的焦点/悬停状态

Question

我有一个悬停时出现的工具提示。问题是，为了删除移动设备中的焦点/悬停状态，您必须单击 .explanation div 外部。我想做这样你也可以关闭它我的

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

css 看起来像这样：

.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;
        }
    }

    &:hover p {
      display: block;
    }
  }
}

jsfiddle在这里

这在桌面上完美运行，但在移动设备上我希望能够通过单击 [x] a 标签来删除元素上的焦点。您已经可以通过单击其他任何位置来关闭它，但我希望也能够单击 X（位于内部）来关闭。

我想它会是这样的：

const closeButton = document.querySelector(
    '.main .explanation p a'
);

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

closeButton.addEventListener('click', removeFocus, false);

function removeFocus(event) {
    main.blur();
    event.preventDefault();
}

但这没有任何作用，至少在 Chrome 中没有。如何关闭移动设备上的悬停状态？

Answer 1

不要使用

css

悬停，而是使用

mouseenter

和

mouseleave

。 在

mouseenter

上添加

active

类，并在

mouseleave

上删除它。 当我们单击关闭按钮时，删除该类

const closeButton = document.querySelector('.main .explanation p a');
const explanation = document.querySelector('.main .explanation');

closeButton.addEventListener('click', toggleExplanation, false);
explanation.addEventListener('mouseenter', (e) => {
    explanation.classList.add('active');
});

explanation.addEventListener('mouseleave', (e) => {
    explanation.classList.remove('active');
});

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

.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>