Unable to pass Javascript UI details

Question

I am trying to create a custom javascript event. The event works and fires correctly, but the "detail" object that I am passing is not available.

Here is the code that I use to create and dispatch the event;

var double_tap = new CustomEvent("doubleTap", { detail: { hello: 'world' }, bubbles: true, cancelable: true }); this.dispatchEvent(double_tap); 

Then I use jquery to add an event listener to the body;

 $('body').on('doubleTap', function( e ) { console.log(e); }); 

It starts and the console log occurs, but, unfortunately, the log displays information about the event, including bubbles and canceled properties, but it is never a "detail" object, so the information is not available.

Here is an example jsbin, im that creates an event in a click event for the body so you can see the console; http://jsbin.com/looseroots/6

I would like to receive data from the "detail" object when the event fires. What am I doing wrong? I tested this in Chrome and Safari on iOS

Answer 1

To find out more, you need to access the originalEvent property.

 console.log(e.originalEvent.detail); 

Answer 2

 obj.addEventListener("eventName", function(e) { console.log(e.your_property) }) var event = new CustomEvent("eventName"); event.your_property = { key: "value" }; obj.dispatchEvent(event); 

You can create properties in your CustomEvent, when you submit, you submit it.

Answer 3

I found the following message: https://github.com/jquery/jquery/commit/a90ff8c8c79bfcc32afd340a12f016f20a31d8b6

This fix is ​​in the jQuery compat branch and should be fixed with jQuery 3.0.