了解PreventDefault和DefaultPrevented如何使用自定义事件

Question

嘿大家我只是在这里看一下这个引导Jquery代码,在carasoul.js中,我很难理解defaultprevented和preventDefault如何使用自定义事件.看一下bootstrap代码:

var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
  relatedTarget: relatedTarget,
  direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return 

看到这里检查 if (slideEvent.isDefaultPrevented()) return基本上我不明白如何isDefaultPrevented())使用自定义事件,我尝试在这里创建一个演示:

var slideEvent = $.Event('slide');

$('a').on('click' , function(e){
    e.preventDefault(); 
    $(this).trigger(slideEvent);
})

$('a').on('slide' , function(e){
    e.preventDefault();
})

if (slideEvent.isDefaultPrevented()) {
        console.log('is default prevented');
}  

但不知何故下面的代码块从来没有console.log的:

if (slideEvent.isDefaultPrevented()) {
        console.log('is default prevented');
}  

也许我这样做是错误的.有人可以解释一下吗？我想要做的就是了解PreventDefault()和DefaultPrevented如何使用自定义事件,我想要一个有效的演示,以便我能更好地理解.

这是我尝试过的一个FIDDLE

Answer 1

我认为你是从用户的角度来看的。您应该从开发人员的角度来考虑它。考虑以下示例。在此示例中，我们为用户提供以下功能：

1. 当用户单击链接时，我们的插件将显示警报
2. 有两种可能：
   1. 用户可能会使用我们的功能（查看警报）
   2. 或者可能想要定义自己的功能。

让我们定义我们的插件

$('a').on('click', function (e) { // As per our feature we will act on clicking a href
    var slideEvent = $.Event('slide'); // lets create our custom event
    e.preventDefault(); // of course we don't like hrefs
    $(this).trigger(slideEvent); // We should throw a slide event when the link is clicked
    if (slideEvent.isDefaultPrevented()) { // but if the user does not want to see our default event, they will preventDefault and we should stop our feature
        alert('is default prevented');
        return;
    }
    alert('clicked on href'); // our default feature is to display alert.
});

现在这个功能的使用情况如何？

在这种情况下，用户选择使用默认功能，因此可以看到单击 href 。

$('#case1').on('slide', function (e) {
   // e.preventDefault();

});

在这种情况下，用户选择定义自定义功能并因此e.preventDefault被使用。（这在我们的插件定义中isDefaultPrevented()）

$('#case2').on('slide', function (e) {
   e.preventDefault();
});

完整示例：

$('a').on('click', function (e) {
    var slideEvent = $.Event('slide');
    e.preventDefault();
    $(this).trigger(slideEvent);
    if (slideEvent.isDefaultPrevented()) {
        alert('is default prevented');
        return;
    }
    alert('clicked on href');
})

$('#case1').on('slide', function (e) {
   // e.preventDefault();

});
$('#case2').on('slide', function (e) {
   e.preventDefault();
});

$('a').on('click', function (e) { // As per our feature we will act on clicking a href
    var slideEvent = $.Event('slide'); // lets create our custom event
    e.preventDefault(); // of course we don't like hrefs
    $(this).trigger(slideEvent); // We should throw a slide event when the link is clicked
    if (slideEvent.isDefaultPrevented()) { // but if the user does not want to see our default event, they will preventDefault and we should stop our feature
        alert('is default prevented');
        return;
    }
    alert('clicked on href'); // our default feature is to display alert.
});

$('#case1').on('slide', function (e) {
   // e.preventDefault();

});

$('#case2').on('slide', function (e) {
   e.preventDefault();
});