Understanding how PreventDefault and DefaultPrevented work with custom events

Question

Hey guys, I'm just looking at this jQuery boot code here in carasoul.js . I have a little difficulty understanding how defaultprevented and preventDefault work with custom events. look here for the download code:

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

see this check here if (slideEvent.isDefaultPrevented()) return Basically I don’t understand how isDefaultPrevented()) can be used with a custom event, I tried to create a demo here:

 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'); } 

but somehow below the code block will never be console.log:

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

Maybe I'm doing it wrong. can anyone explain? all I want to do is understand how PreventDefault () and DefaultPrevented work with custom events, and I need a working demo so that I can better understand.

Here is the FIDDLE of what I tried

Answer 1

I think you look at it from the point of view of the user. You should think about it from a developer's point of view. Consider the following example. In this example, we provide the user with the following functions:

• When a user clicks on a link, our plugin displays a warning
• There are two possibilities:
  • User can use our function (see warning)
  • Or, you might want to define your own functionality.

---

Allows you to define our plugin

 $('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. }); 

How is this feature used now?

In this case, the user chooses to use the default function, and therefore a click on the href button is displayed.

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

In this case, the user selects the definition of user functionality and, therefore, e.preventDefault used. (Which falls into our plugin definition in isDefaultPrevented() )

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

---

Full example:

 $('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 (); this is a function that forces u to disable the default event for an element such as

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

when you click this link when the page loads, it does not redirect you to the page. but isDefaultPrevented (); will check if the event is disabled by default or not.