如何在 HTML 页面上的每个链接上正确附加事件侦听器

Question

我有以下代码在 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

我对你的问题有点不清楚，但我认为你正在尝试这样做

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);
});

注意：这可以进一步优化

Answer 2

您没有将 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 3

您想为此使用 JQuery 或 Prototype，否则它将无法跨浏览器兼容。 仅适用于 IE 的 MSPointerEvents 也是如此。

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;
    }
};

现在来实际尝试回答您的问题： 事件会冒泡，因此如果您在链接中放置一个链接，如果您在子元素内部单击，则会触发这两个事件。