如何使功能工作的每個圖像

一旦我有5張圖片在一個javascript場相同的功能，我想知道如何能夠每幅圖像如何使功能工作的每個圖像

我當前的代碼，一旦使用功能

function move() 
{ 
    // move to the first now 
    document.getElementsByTagName('div')[0].insertBefore 
    (this, document.getElementsByTagName('div')[0].firstChild) 
} 

img1.onclick=move 
img2.onclick=move 
img3.onclick=move 
img4.onclick=move 
img5.onclick=move

來源

2017-04-03 Aeroy

'img1.addEventListener（「click」，functionName）'在函數中，在末尾執行'this.removeEventListener（'click'，functionName）' – Rajesh

將所有圖像包裝在單個'Div'中並使用'event冒泡「屬性基於目標元素。 – ricky

可能重複的[強制JavaScript的EventListener執行一次？]（http://stackoverflow.com/questions/4878805/force-javascript-eventlistener-to-execute-once） – Rajesh

在.addEventListener()第三個參數

[img1, img2, img3, img4, img5] 
.forEach(function(img) { 
    img.addEventListener("click", move, {once:true}) 
});

var [img1, img2, img3, img4, img5] = document.images; 
 

 
function move() { 
 
    alert(this.alt) 
 
} 
 

 
[img1, img2, img3, img4, img5] 
 
.forEach(function(img) { 
 
    img.addEventListener("click", move, {once:true}) 
 
});

<img alt="1"><img alt="2"><img alt="3"><img alt="4"><img alt="5">

設置 once到

來源

2017-04-03 05:16:59 guest271314

哇，我沒有意識到'.addEventListener（）'接受這樣的選項，所以我查了一下：應該指出它不支持IE *或* Edge。 – nnnnnn

我不知道這個屬性。 +1。也想要求你把這個方法的樣本放在提到的僞裝上，因爲這是一個長期運行的線程，並且會獲得更多的曝光。 :-) – Rajesh

@nnnnnn有沒有使用，即在一段時間內，還沒有嘗試過邊緣 – guest271314

如果環境支持addEventLister第三個參數，這可能肯定是更好地使用。但是，如果你需要與遺留代碼工作（因爲你是在Intranet的工作，和/或無法添加構建步驟），你可以有這樣的事情：

var imgs = [img1, img2, img3, img4, img5]; 

for (var img, i = 0; img = imgs[i++];) { 
    img.onclick = function() { move.call(this); this.onclick = null; } 
}

這將作品大多數情況下，甚至在addEventListener根本不支持。但我不會推薦這個，如果你有addEventListener和至少ES6的適當支持;我只是添加這個答案的記錄。如果您有至少addEventListener（較老的IE不，他們已經attachEvent），你至少可以有：

var imgs = [img1, img2, img3, img4, img5]; 

for (var img, i = 0; img = imgs[i++];) { 
    img.addEventListener("click", function listener() { 
    this.removeEventListener("click", listener, false); 
    move.call(this); 
    }, false); // in some browser the `useCapture` is still not optional 
}

如果forEach支持，循環可以與被替換。

來源

2017-04-03 10:04:07 ZER0

如何使功能工作的每個圖像

回答

相關問題