如何在HTML頁面上的每個鏈接上正確添加事件監聽器

Question

我有以下代碼，它將HTML事件監聽器附加到HTML文檔的每個鏈接上。

問題是，evt.target.href總是返回頁面上的最後一個鏈接，而不是引發事件的確切鏈接。我錯過了什麼？

var links = document.getElementsByTagName('a'); 

for (i = 0; i < links.length; i++) { 
    links[i].addEventListener('MSGestureHold', eventListener, false); 
    links[i].addEventListener('MSPointerDown', eventListener, false); 
    gestureHandler = new MSGesture(); 
    gestureHandler.target = links[i]; 
}; 

function eventListener(evt) { 
    if (evt.type == 'MSPointerDown') { 
     gestureHandler.addPointer(evt.pointerId); 
     return; 
    } 

    if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) { 
     window.external.notify(evt.target.href); 
    } 
}; 

編輯 我要指出，我對Windows Phone的開發和使用它運行IE10瀏覽器的控制。所以我不關心兼容性。

Answer 1

你沒有定義gestureHandler爲VAR所以它是你不斷設置新的值全球..

var links = document.getElementsByTagName('a'); 
    for (i = 0; i < links.length; i++) 
    { 
     links[i].addEventListener('MSGestureHold', eventListener, false); 
     links[i].addEventListener('MSPointerDown', eventListener, false); 
     var gestureHandler = new MSGesture(); // <--- notice the var, only local 
     gestureHandler.target = links[i]; 
    }; 

Answer 2

你想使用jQuery或原型爲，否則將不跨瀏覽器兼容。 同樣適用於MSPointerEvents，它只是IE。

JQuery的例子：

$('#foo').bind({ 
    click: function() { 
    // do something on click 
    }, 
    mouseenter: function() { 
    // do something on mouseenter 
    } 
}); 

如果你不想使用庫（但我強烈建議你看看他們），你應該這樣寫：

var addEvent = function (el, ev, fn) { 
    if (el.addEventListener) { 
     el.addEventListener(ev, fn, false); 
    } else if (el.attachEvent) { 
     el.attachEvent('on' + ev, fn); 
    } else { 
     el['on' + ev] = fn; 
    } 
}; 

而現在實際嘗試並回答你的問題： 事件冒泡，所以如果你在鏈接中放置一個鏈接，如果你點擊子元素內部，你將觸發兩個事件。

Answer 3

我有點不清楚你的問題，但我認爲你正在嘗試做這個

var links = document.getElementsByTagName('a'); 

function eventListener(evt, gestureHandler) { 
    if (evt.type == 'MSPointerDown') { 
     gestureHandler.addPointer(evt.pointerId); 
     return; 
    } 

    if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) { 
     window.external.notify(evt.target.href); 
    } 
}; 

[].forEach.call(links, function (link) { 
    link.addEventListener('MSGestureHold', function (evt) { 
     var gestureHandler = new MSGesture(); 

     gestureHandler.target = link; 
     eventListener(evt, gestureHandler); 
    }, false); 

    link.addEventListener('MSPointerDown', function (evt) { 
     var gestureHandler = new MSGesture(); 

     gestureHandler.target = link; 
     eventListener(evt, gestureHandler); 
    }, false); 
}); 

注：這可以進一步優化