Question

嘿伙计我只是在carasoul.js看这个引导程序Jquery代码，我很难理解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＆＃39; s：

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

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

以下是我尝试过的 FIDDLE

Answer 1

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

当用户点击链接时，我们的插件将显示警告
有两种可能性：
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) {
    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 {
    font-size: 3em;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <a href="http://stackoverflow.com/" id="case1">Case 1</a>
 <a href="http://stackoverflow.com/" id="case2">Case 2</a>

Answer 2

的preventDefault（）;是一个使你禁用像

这样的元素的默认事件的函数

<a href="http://example.com"></a>
<script>$(function(){
  $('a').preventDefault();
});</script>

在页面加载时单击该链接时，它不会将您重定向到该页面。但是isDefaultPrevented（）;将检查默认事件是否被禁用。

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

2 个答案: