addEventListener 点击有效，但鼠标悬停无效答案

【问题标题】：addEventListener click works but not mouseoveraddEventListener 点击有效，但鼠标悬停无效
【发布时间】：2021-09-19 23:24:48
【问题描述】：

我知道我在做一些愚蠢的事情，但对于我的生活，我看不到它是什么。

我的名字有一个字母 div，放在一个容器中。这个想法是“鼠标悬停”字母并更改字符的大小，尽管鼠标悬停不起作用。如果我将事件更改为“点击”，那么它确实有效。

为什么“鼠标悬停”不起作用，而“点击”却起作用？

我是否使用了错误的事件将鼠标悬停在元素上？

document.getElementById('profile_name').addEventListener('mouseover', function(e) {
  e.target.style.fontSize = '10px';

}, false);

<div class="profile_name_container">
  <div id="profile_name">
    <span class="letter">J</span>
    <span class="letter">e</span>
    <span class="letter">s</span>
    <span class="letter">s</span>
    <span class="letter">i</span>
    <span class="letter">c</span>
    <span class="letter">a</span>
    <span class="letter">.</span>
    <span class="letter">R</span>
    <span class="letter">y</span>
    <span class="letter">a</span>
    <span class="letter">n</span>
  </div>
</div>

【问题讨论】：

怎么不工作了？
你想改变单个字符的字体大小吗？
@Spectric 如果我使用点击作为文本减少的事件。如果我使用 mouseover 作为事件，那么什么都不会发生
@JessicaRyan 使用您提供的代码，它可以正常工作。
@wittgenstein 是的，当用户滚动一个字符时，我想更改该字符的大小

标签： javascript click addeventlistener mouseover

【解决方案1】：

您可以将事件附加到每个 .letter。

但更好的方法是使用事件冒泡并检查目标是否具有 letter 类。

这种技术称为事件委托。另一个优点是，如果以后添加更多字母，则无需添加更多事件。

例如..

document.getElementById('profile_name').addEventListener('mouseover', function(e) {
  if (e.target.classList.contains('letter'))
    e.target.style.fontSize = '10px';
}, false);

<div class="profile_name_container">
  <div id="profile_name">
    <span class="letter">J</span>
    <span class="letter">e</span>
    <span class="letter">s</span>
    <span class="letter">s</span>
    <span class="letter">i</span>
    <span class="letter">c</span>
    <span class="letter">a</span>
    <span class="letter">.</span>
    <span class="letter">R</span>
    <span class="letter">y</span>
    <span class="letter">a</span>
    <span class="letter">n</span>
  </div>
</div>

【讨论】：

【解决方案2】：

您将mouseover 事件附加到ID 为profile_name 的元素，其中包含所有字符。您正在使用元素的 target 属性，该属性将是事件附加到的元素。在这种情况下，它是包含元素。所以包含元素的文本大小是正在改变的样式，而不是字符所在的元素。

以下应该可以工作

var a = document.getElementById('profile_name').getElementsByClassName('letter');

for (var i = 0; i < a.length; i++) {

    (function(elem) {
        elem.addEventListener('mouseover', function(e) {
            e.target.style.fontSize = '10px';
        })
    })(a[i]);
}

【讨论】：

【解决方案3】：

我试图在开发者控制台打开时对此进行测试，这会阻止读取鼠标悬停事件。

我还调整了我的 js，使其使用事件委托针对单个字母：


    document.getElementById('profile_name').addEventListener('mouseover', function(e) {
       if (e.target.className === 'letter') {
           e.target.style.fontSize = '10px';
       }
           
    }, false);

它现在正在工作。

【讨论】：

【解决方案4】：

试试这个。

   
var item = document.getElementById("profile_name");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func(e)
{  
   e.target.style.fontSize = '10px';
   e.target.style.color = 'red';
   
}

function func1(e)
{  
   e.target.style.fontSize = '16px';
   e.target.style.color = '#000';
}

<div class="profile_name_container">
     <div id="profile_name">
          <span class="letter">J</span>
          <span class="letter">e</span>
          <span class="letter">s</span>
          <span class="letter">s</span>
          <span class="letter">i</span>
          <span class="letter">c</span>
          <span class="letter">a</span>
          <span class="letter">.</span>
          <span class="letter">R</span>
          <span class="letter">y</span>
          <span class="letter">a</span>
          <span class="letter">n</span>
     </div>
</div>

【讨论】：