javascript - 为什么事件没有被消耗？

Question

我有一个网页，其中有一个菜单+子菜单，其中有一堆 <a> anchor 。单击这些 anchor 中的任何一个时，都会在 iframe 中打开一个页面。 。它工作正常，除了在移动浏览器中，即使单击子菜单后，子菜单仍保持打开状态，因此该事件不会被“消耗”。为什么？

我用以下方法来做到这一点。首先，我设置了onclick功能:

var anchors = MyMethodGetElementByClassName('loadt');
for(var i = 0; i < anchors.length; i++) {
 anchors[i].onclick = function(e) {
  loadthis(e,this.href);
 }
}

在方法loadthis中，我这样做:

function loadthis(e,pg)
 var evt = e || window.event;
 if (evt != 88 && evt !== "null") {
  evt.preventDefault();
 }
 frame.src = pg;
 $('html').trigger('click');
 return false;
}

loadthis的最后两行尝试通过触发文档中的单击并返回 false 来消费该事件。然而，子菜单仍然打开。

看看here在智能手机中(例如，单击“软件 > Ave”)。

Answer 1

您的处理程序没有返回任何值。它调用的函数 (loadthis) 是，但事实并非如此。 (但请继续阅读。)

要使您的处理程序返回一个值，请返回调用loadthis的结果:

var anchors = MyMethodGetElementByClassName('loadt');
for(var i = 0; i < anchors.length; i++) {
 anchors[i].onclick = function(e) {
  return loadthis(e,this.href);
//^^^^^^^
 }
}

此外，您似乎支持旧版浏览器。如果是这样，您需要在 preventDefault 调用上设置一个保护(尽管您实际上并不需要它；您连接事件的方式，return false 就足够了； details in this minor post on my blog )。例如:

function loadthis(e,pg)
 var evt = e || window.event;
 if (evt != 88 && evt !== "null" && evt.preventDefault) {
// -----------------------------^^^^^^^^^^^^^^^^^^^^^^
  evt.preventDefault();
 }
 frame.src = pg;
 $('html').trigger('click');
 return false;
}

最后:evt 将始终为 != 88 并且始终为 !== "null"，因此您可以而且可能应该删除那些。

但是，您似乎正在使用 $('html').trigger('click'); 行中的 jQuery。如果是这样，这一切都可以显着简化:

$(".loadt").on("click", function() {
    $('html').trigger('click');
    return false;
});

...因为 evt != 88 && evt !== "null" 无论如何都将始终为 true...这也将停止传播(而不仅仅是阻止默认值)，这可能有帮助。