小编Ant*_*oss的帖子

我知道这看起来很奇怪，但我有一种情况，当我们将鼠标悬停在目标上时，我需要模拟单击事件。

我目前正在使用 JavaScript 的.click()方法 \xe2\x80\x93 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click，但点击冒泡到liDOM 中并activateAnchor()同时触发功能。我尝试过使用stopPropagation，但这没有效果。

我的问题是：这是否可能，或者我是否需要以不同的方式处理这个问题。

我这里有一个例子 \xe2\x80\x93 https://jsfiddle.net/dryrobe/vsq7czmx/43/

const output = document.querySelector(\'.output\');\nconst switcherList = document.querySelector(\'[data-custom-switcher]\');\nconst switcherListItems = Array.from(switcherList.getElementsByTagName(\'li\'));\nconst switcherListItemsAnchors = Array.from(switcherList.getElementsByTagName(\'a\'));\n\nswitcherListItemsAnchors.map(switcherListItemAnchor => switcherListItemAnchor.addEventListener(\'mouseenter\', simulateClick.bind(switcherListItemAnchor)));\nswitcherListItems.map(switcherListItem => switcherListItem.addEventListener(\'click\', activateAnchor.bind(switcherListItem)));\n\n// This should only fire when each item is clicked, but it fires on hover.\nfunction activateAnchor() {\n  event.stopPropagation();\n  addMessage(\'activateAnchor\');\n}\n\n// This should fire when each item is hovered\nfunction simulateClick() {\n  event.stopPropagation();\n  this.click();\n  addMessage(\'simulateClick\');\n}\n\nfunction addMessage(message) {\n  if(message === \'activateAnchor\') {\n …

我编写了一个动画条形图的函数。目前这个动作是在页面加载时触发的，但我只希望它在我到达元素时触发——否则用户将看不到动画。我想通过 vanilla JavaScript 实现这一点，这可能吗？

这是我的标记：

<div class="section">
  section
</div>
<div class="section">
  section
</div>
<div class="section">
  section
</div>
<div class="section">
  section
  <ul class="skills__list">
    <li class="skills__list-item">
      <div class="bar">
        <span>HTML</span>
        <div class="bar__inner" data-percent="90%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>css</span>
        <div class="bar__inner" data-percent="80%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>Javascript</span>
        <div class="bar__inner" data-percent="60%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>UI design</span>
        <div class="bar__inner" data-percent="70%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>sketch</span>
        <div class="bar__inner" data-percent="50%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>Photoshop</span>
        <div class="bar__inner" …