Using JavaScript Event rather than MooTools Element.Event

Question

I have inherited a codebase which implements MooTools 1.4.5.

The code also utilises a third party library to handle dragging on responsive devices. The following code is in that library:

var dndEvent = new Event(type, {
    bubbles: true,
    cancelable: cancelable
});

That event is producing the following exception in an anonymous MooTools function:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

The MooTools code is minified (and unmapped), so as yet I have not tested it against the unminified code to see what this anonymous function does, but I suspect it is related to MooTools Element.Event.

If this is the case how would I force the scope to use JavaScript's Event interface rather than MooTools?

Answer 1

A quick hack (as I think you're trying to avoid deep refactoring at this stage) would be to 'save' the Event object before Mootools overwrites it:

<script>window.savedEvent = window.Event</script>
<script src="mootools.js"></script>

And then modify your 3rd party library to use 'savedEvent' where it now says 'Event', or place all of it inside a scope..

+(function() {
  var Event = window.savedEvent
  //existing code goes here
})()

but that might require you to explicitly export everything that library offers by putting those identifiers on the window object