如何解决addEventListener 单击有效但鼠标悬停无效
我知道我在做一些愚蠢的事情,但对于我的生活,我看不到那是什么。
我的名字有一个 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>
解决方法
您可以为每个 .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>
您将 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]);
}
,
我试图在开发者控制台打开时进行测试,这阻止了鼠标悬停事件被读取。
我还调整了我的 js,使其使用事件委托来针对单个字母:
document.getElementById('profile_name').addEventListener('mouseover',function(e) {
if (e.target.className === 'letter') {
e.target.style.fontSize = '10px';
}
},false);
现在可以使用了。
,试试这个。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。