0

In a book, the code for handling mouseDown event is like this:

mousedownhandler: function (ev) {
    mouse.down = true;
    mouse.downX = mouse.x;
    mouse.downY = mouse.y;
    ev.originalEvent.preventDefault();
}

So my question is why use ev.originalEvent.preventDefault(); but not ev.preventDefault(); or return false; in this case (HTML5 game)?

Tr1et
  • 873
  • 11
  • 25
  • 2
    Read this: http://stackoverflow.com/questions/16674963/event-originalevent-jquery –  Jan 01 '17 at 03:58
  • Yeah! I know it is the underlying event, but why use it? Since not every browser/device will behave the same. – Tr1et Jan 01 '17 at 03:59
  • @Tr1et refer this: http://stackoverflow.com/a/19618014/3783478 – Rajesh Jan 01 '17 at 04:01

3 Answers3

2

jQuery alters the event methods / data in the returned event.

Using event.originalEvent, you're able to retrieve this back.

For example jQuery strips the dataTransfer api for dragged items, using the originalEvent you can use it again.

docs: "jQuery normalizes the following properties for cross-browser consistency ... To access event properties not listed above, use the event.originalEvent object"

In the proposed case it's used to access the preventDefault method (which stops the default action) as it's not included in the jQuery event.

  • So in this case, what is the benefit of using `preventDefault()` on `originalEvent`? – Tr1et Jan 01 '17 at 04:03
  • Just a pointer, instead of strips, you can safely say, you will receive jQuery's event object and not original event object. TO retrieve that, you should use `.originalEvent` – Rajesh Jan 01 '17 at 04:04
  • So in making game, I should only use the `originalEvent`, right? – Tr1et Jan 01 '17 at 04:07
  • If I were making a game I wouldn't use jQuery at all. –  Jan 01 '17 at 04:09
  • Okay! So in making game, I should stick to plain JS. But can you tell me what does JQuerys "event.preventDefault()" altered the original "originalEvent.preventDefault()" that I should use the originals instead? Or is it just good practice? – Tr1et Jan 01 '17 at 04:13
  • when you're using jQuery's call back, you will have to access the `preventDefault` method via the `originalEvent` object. You will get an undefined error if you don't. If you're new to JavaScript you may want to stick with jQuery as it makes some things easier. –  Jan 01 '17 at 04:15
1

See the definition of preventDefault in jQuery 3.1.1:

jQuery.Event.prototype = {
    // ...
    preventDefault: function() {
        var e = this.originalEvent;
        this.isDefaultPrevented = returnTrue;
        if ( e && !this.isSimulated ) {
            e.preventDefault();
        }
    },
    // ...
};

So basically it will just call native preventDefault. If you are using jQuery I would use its method, it will also update isDefaultPrevented which might be useful if you want to check it (but you could also use native .originalEvent.defaultPrevented).

If you don't care about isDefaultPrevented and know the event has not been simulated by jQuery, then calling native preventDefault might be few milliseconds faster. That's the only potential advantage I can think of, but this definitely won't be a bottleneck.

Returning false in a jQuery event listener is like using both preventDefault and stopPropagation.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • So does that mean that in this case, using "originalEvent.preventDefault()" does nothing better than using jQuerys one? – Tr1et Jan 01 '17 at 04:26
  • @Tr1et Yes, basically. Native JS is faster than jQuery, but if you are already using jQuery I don't see the point in ignoring its `preventDefault`. – Oriol Jan 01 '17 at 04:29
  • May you explain that "simulated" thing? – Tr1et Jan 01 '17 at 04:43
  • @Tr1et jQuery simulates `focusin` and `focusout` events on browsers which don't support them. – Oriol Jan 01 '17 at 04:45
0

I use to know if the event was actually triggered by a physical mouse click. This is useful for avoiding the use of captchas on submit forms.

Sergio
  • 609
  • 1
  • 7
  • 11