如何触发mouseover事件仅适用于使用javascript的img元素

我希望我的鼠标悬停事件仅在我将鼠标悬停在一个img元素上时触发。我用如何触发mouseover事件仅适用于使用javascript的img元素

document.getElementsByTagName('img').onmouseover=function(e){ }

但它不起作用。我应该如何实现这一目标？

来源

2017-05-05 Unique Kiddo

'getElementsByTagName'返回'阵列like'元素，所以你通过该阵列中需要循环，或使用索引来定位其中之一 –

我想你应该通过一个应用事件监听器元素之一：

const imgs = document.getElementsByTagName('img'); 
 

 
const map = fn => x => Array.prototype.map.call(x, fn); 
 

 
map(img => { 
 
    img.addEventListener('mouseover', (e) => { 
 
    e.target.style.border = '1px solid red'; 
 
    }); 
 
    img.addEventListener('mouseleave', (e) => { 
 
    e.target.style.border = 'none'; 
 
    }); 
 
})(imgs)

<img src="" width="100" height="100"> 
 
<img src="" width="100" height="100"> 
 
<img src="" width="100" height="100">

在这里，我们从中提取Array.prototypemap功能，所以我们可以在任何可迭代的映射函数对象，而不仅仅是数组。

相同的代码与普通ES5语法：

const imgs = document.getElementsByTagName('img'); 
 

 
const map = function(fn) { 
 
    return function(x) { 
 
    Array.prototype.map.call(x, fn); 
 
    } 
 
} 
 

 
const sponge = 'http://vignette3.wikia.nocookie.net/spongebob/images/6/6f/SpongeBob_%286%29.png/revision/latest?cb=20140824163929'; 
 

 
map(function(img) { 
 
    img.addEventListener('mouseover', function(e) { 
 
    e.target.src = sponge; 
 
    }); 
 
    img.addEventListener('mouseleave', function(e) { 
 
    e.target.src = ''; 
 
    }); 
 
})(imgs)

<img src="" width="90" height="80"> 
 
<img src="" width="90" height="80"> 
 
<img src="" width="90" height="80">

来源

2017-05-05 13:35:56 wostex

getElementsByTagName返回元素的实况HTMLCollection。您需要在所有元素上设置事件，而不是在集合上。

你可以这样做：

var arrElem = document.getElementsByTagName('img'); 

for (var i = arrElem.length; i-- ;) { 
    arrElem[i].onmouseover = function(e) {}; 
}

来源

2017-05-05 13:29:15 R3tep

你在10秒内击败了我。删除我的答案。 – Avitus

'getElementsByTagName'返回不是数组，而是像Collection一样的数组。这个集合不会有数组方法：map，forEach .... –

@SergeyOrlov，但你仍然可以应用'map'和其他'Array.prototype'方法，如我的答案中所示。 – wostex

的getElementsByTagName返回元素的集合。如果只有一个img它将是具有一个元素的集合。所以你需要通过[0]访问这个集合的属性。

document.getElementsByTagName('img')[0].onmouseover=function(e){ }

来源

2017-05-05 13:30:14

这些会做你想做的吗？你需要JQuery，但我会推荐它。

$('#img') 
    .mousemove(function (event) { 
     console.log('Mouse moved'); 
    }) 
    .mouseenter(function() { 
     console.log('Mouse over'); 
    })

来源

2017-05-05 13:30:37 texnic

没有jQuery的标记。 – R3tep

如何触发mouseover事件仅适用于使用javascript的img元素

回答

相关问题