如何使用JavaScript僅觸發img元素觸發鼠標懸停事件

Question

我希望僅將鼠標懸停在img元素上時觸發mouseover事件。 我用了

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

但它不起作用。 我應該如何實現呢？

Answer 1

我認為您應該將事件偵聽器一一應用於元素：

 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.prototype提取map函數，因此我們可以將函數映射到任何可迭代對象上，而不僅僅是數組。

具有常規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"> 

Answer 2

getElementsByTagName返回元素的實時HTMLCollection 。 您需要在所有元素上而不是在集合上設置事件。

您可以這樣做：

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

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

Answer 3

GetElementsByTagName返回元素的Collection。 如果只有一個img ，它將是一個元素的集合。 因此，您需要通過[0]訪問此集合的屬性。

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

Answer 4

這些都可以做什么嗎？ 您將需要JQuery ，但是無論如何我還是會推薦它。

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