javascript - 了解事件处理程序

Question

作为练习，我尝试向 ebay.com 元素添加一个事件监听器。

预期结果:显示警告并阻止网页转到下一个 URL。

发生了什么:显示了警报，但仍显示了下一个 URL。

我在测试 preventDefault、stopPropagtion 和 stopImmediatePropagation 的产品页面上发现了一些有趣的东西。

无论我使用哪种组合，似乎都不起作用。

基本代码是:

$('#binBtn_btn').click(function(evt){
    alert('hi');
    evt.stopPropagation(); //or any other option.
});

问题是我收到了警报，但它仍然转到下一页，就好像我从未停止过传播一样。

看了很多关于事件处理的文章，都没有找到答案。非常感谢您的帮助。

Answer 1

我最好的猜测是 Button 有自己的点击处理程序，并且它会先于你的点击处理程序触发。

$('#binBtn_btn').data("events") 向我们展示了确实有一个 click 事件。使用 off 删除它.

$('#binBtn_btn').off('click');

现在单击按钮仍会导致表单提交，因为我们所做的只是浏览到一个页面。该按钮实际上只是一个 a 标签。

$('#binBtn_btn').click(function(e){
    alert('Gotcha!');
    e.preventDefault();
});

让我们看看如果我们删除他们的处理程序，添加我们的，然后重新添加他们的处理程序会发生什么......

var existing = $('#binBtn_btn').data('events').click[0];
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; });
$('#binBtn_btn').data('events').click.push(existing);

相同，但只是查看点击处理程序的函数(而不是直接调整 events.click 数组...)

var existing = $('#binBtn_btn').data('events').click[0].handler;
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); });
$('#binBtn_btn').click(existing);

正如预期的那样，现在的第二个处理程序——他们的处理程序——并不是第一个。 (我添加了 return false; 而不是 e.preventDefault();，只是为了演示不同的做事方式!)

您可以通过放置断点并查看上面的 existing var 来检查它们在做什么。您会看到，在它们的函数结束时，它们确实调用了 e.preventDefault();。

希望这对您有所帮助。