Question

我将带有循环的addEventListener添加到一些锚元素productions，如下所示：

for(var j=0;j<productions.length;j++){
    productions[j].addEventListener('click',production_e,false);
}

问题：这是有效的，但是当我将其更改为“mousedown＆＃39;它在完成所有XHR获取后遵循默认锚链接。

function production_e（）测试＆＃34;生产＆＃34;单击，然后检查它是否包含生产的描述。如果没有，它会启动XHR来检索描述并将其插入到生成元素中。

function production_e(e) {
  e.preventDefault();
  if(!current_show) {
    current_show = this;
    if(!this.getElementsByClassName('production_description')[0])
        get_production_article(this,show_description);
  }
}

get_production_article = function(production,callback) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(e) {
        if(req.readyState === 4 && req.status === 200) {
            install_article(production,req.responseText);
            callback(production);
        }
    }
    var pl = production.getElementsByClassName('production-link')[0];
    req.open('GET',pl.href + '-article',true);
    req.send();
}

函数install_article只是将responseText插入到DOM中，而回调函数show_description设置样式以公开元素。

但是，当我使用mousedown时，鼠标左键似乎执行所有相同的任务，但随后是默认的锚链接到另一个页面。有趣的是，鼠标右键单击就像我期望鼠标左键单击一样。

我猜测preventDefault（）函数不会通过或重新触发，但我不知道这是怎么回事。我错过了什么？

Answer 1

好吧，防止mousedown默认值不会阻止click事件发生，并且它是默认值。您还必须收听点击事件，以防止出现默认的click行为。

Answer 2

我通常会尝试避免执行XHR的链接，除非您想为不运行javascript的人留下选项。相反，如果需要，我会使用一个按钮并将其设置为链接，并且您可以为要用于XHR的任何信息设置data-xxx属性。

<button data-article="id0123" type="button" >Article 123</button>

然后您可以使用：e.currentTarget.dataset.article

查看此codepen是否有帮助：http://codepen.io/pituki/pen/gtCus

addEventListener与'mousedown'不同于'click'

2 个答案: