mootools / mootools-core

MooTools Core Repository
https://mootools.net
2.65k stars 511 forks source link

MooTools library conflicting with new Event(typeArg) #2806

Closed RageJS closed 6 years ago

RageJS commented 6 years ago

Steps to replicate 1) Add MooTools Library to your page 2) Run var testEvent = new Event('test') in the console

This will throw an error since MooTools overrides the Event.prototype.constructor with a function which expects the first argument to be an event object instead of a DOMString as mentioned in the specs here, is this the intended behaviour? Asking since it breaks a native JavaScript functionality.

timwienk commented 6 years ago

Yes, it is intended. You are using a version of MooTools Core with compatibility layer, which overwrites/replaces things necessary to be compatible with old versions of MooTools Core (to make it possible to upgrade MooTools Core while using older scripts).

In your specific case: https://github.com/mootools/mootools-core/blob/master/Source/Types/DOMEvent.js#L125-L128

The latest version without old-version-compatibility is a lot better compatible with newer versions of JavaScript.

RageJS commented 6 years ago

@timwienk I installed version 1.6.0 of MooTools, which I think doesn't have any compatibility layer, it still expects the argument type in Event.prototype.constructor to be a DomEvent Object, https://github.com/mootools/mootools-core/blob/187a16bae2d7144ea4b81aa5c0586498f0fe17c7/Source/Types/DOMEvent.js#L46 The properties like shiftKey, altKey, type etc. won't be available on a string literal and it throws an error. So is there any way after install the MooTools library to somehow create a custom event, that doesn't need a base DomEvent (like when using Elements.Events in mootools), like I can do with var testEvent = new Event('test')?

timwienk commented 6 years ago

Pretty sure you're using a version with compatibility layer in one way or another. Without compatibility layer, MooTools Core does not touch the native Event variable.

Example without compatibility layer: http://jsfiddle.net/ny514hxv/1/ Example with compatibility layer: http://jsfiddle.net/bv5pf2mg/1/