Question

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

预期结果：显示提醒并停止网页转到下一个网址。

会发生什么：显示警报，但无论如何都会显示下一个网址。

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

无论我使用哪种组合，似乎没有任何效果。

基本代码是 -

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

问题是我收到警报，但仍然会进入下一页，好像我从未停止传播。

我读了很多关于事件处理的文章，但我找不到答案。非常感谢您的帮助。

Answer 1

尝试使用evt.preventDefault()，如下所示：

$('#binBtn_btn').click(function(evt){ 

    evt.preventDefault();
    alert('hi');  

});

然后它不会转到下一页。

Answer 2

我最好猜测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();。

希望这有帮助。

理解事件处理程序

2 个答案: