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，否则它将不会与浏览器兼容。 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;
    }
};

现在要真正尝试回答你的问题：事件冒出来，所以如果你在链接中放置一个链接，如果你点击子元素内部，你将触发这两个事件。

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

3 个答案: