Skip to main content

Bug Tracker

Side navigation

#9314 closed enhancement (wontfix)

Opened May 17, 2011 01:17PM UTC

Closed June 06, 2011 06:48PM UTC

Ability to wrap DOM events to become jQuery events

Reported by: wheresrhys Owned by: wheresrhys
Priority: low Milestone: 1.7
Component: event Version: 1.6.1
Keywords: Cc:
Blocked by: Blocking:
Description

It'd be useful to be able to wrap DOM events in a jQuery wrapper, so

$.Event(event) = event which can be manipulated using the jQuery api.

I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like

if (!event.jqueryEvent) { event = $.Event(event); }

... before continuing using the jQuery API

Attachments (0)
Change History (17)

Changed May 17, 2011 01:58PM UTC by dmethvin comment:1

owner: → wheresrhys
status: newpending

Can you provide some more description of what you mean?

Changed May 17, 2011 02:15PM UTC by wheresrhys comment:2

status: pendingnew

I've created a non-functioning jsFiddle to illustrate the difference it could make: http://jsfiddle.net/wheresrhys/J8Cym/1/. Let me know if you need further clarification

Changed May 17, 2011 02:21PM UTC by rwaldron comment:3

component: unfiledevent
status: newpending

Saw these updates just now, I was actually in the middle of creating a RaphaelJS + jQuery boilerplate for you to illustrate overlapping events:

http://jsfiddle.net/rwaldron/bpWVM/

just "fork" and create your example.

Changed May 18, 2011 09:24PM UTC by wheresrhys comment:4

status: pendingnew

OK, this hopefully illustrates why the ability to wrap native DOM events would be useful

http://jsfiddle.net/wheresrhys/E4NZW/

In a nutshell, other js libraries (in this case Raphael) use native DOM events, and if you want to write a handler it'd be nice to be able to call in the first line a jQuery method that takesa native DOM event/jquery event object, adn returns a jQuery event object so you can use the API no matter what library was used to attach the handler (provided the other library hasn't already wrapped the event in its own wrapper).

Changed May 20, 2011 03:07PM UTC by dmethvin comment:5

status: newpending

So is this what you are looking for?

http://jsfiddle.net/E4NZW/2/

Changed May 22, 2011 07:27PM UTC by john comment:6

keywords: → 1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 08:41PM UTC by rwaldron comment:7

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \

+0,

Changed May 23, 2011 12:53AM UTC by jaubourg comment:8

+1, Seems it would be good for interoperability

Changed May 23, 2011 04:55AM UTC by timmywil comment:9

+0,

Changed May 23, 2011 12:43PM UTC by wheresrhys comment:10

status: pendingnew

Replying to [comment:5 dmethvin]:

So is this what you are looking for? http://jsfiddle.net/E4NZW/2/

Yep - something like that syntax, although the

if ( !(ev instanceof $.Event) )

check could be included inside the $.Event() method to make it an even easier API.

Changed May 24, 2011 12:39AM UTC by timmywil comment:11

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \
priority: undecidedlow
status: newopen

Changed May 24, 2011 10:02PM UTC by dmethvin comment:12

-1, How would jQuery do this? Raphael is delivering the event directly to myHandler, so how would we intervene to convert it to a jQuery event?

Changed May 24, 2011 10:06PM UTC by rwaldron comment:13

I think this is not reasonable

Changed June 03, 2011 02:03PM UTC by john comment:14

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \

-1, Not really keen on this.

Changed June 05, 2011 10:09PM UTC by ajpiano comment:15

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \

-1, I sympathise with the request, but I think that Dave's suggestion (or your own genericisation of) that approach is certainly reasonable, we can't "intercept" the Raphael event.. You don't even have to do the instanceof check, you can just unconditionally transform it into a jQuery event if you know that that will always be necessary.

Changed June 06, 2011 03:08PM UTC by scottgonzalez comment:16

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \

+0, isn't this exactly what $.event.fix does?

Changed June 06, 2011 06:48PM UTC by rwaldron comment:17

description: It'd be useful to be able to wrap DOM events in a jQuery wrapper, so\ \ $.Event(event) = event which can be manipulated using the jQuery api.\ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like\ \ if (!event.jqueryEvent) { event = $.Event(event); }\ \ ... before continuing using the jQuery API\ \ It'd be useful to be able to wrap DOM events in a jQuery wrapper, so \ \ $.Event(event) = event which can be manipulated using the jQuery api. \ \ I've come across the need to have this functionality recently when using Raphael.js. Say I have an event handler that can be triggered by clicking either a canvas element (event handled using Raphael) or a list item, (click handled using jQuery), then I have to write some convoluted code in order to handle both types of event. If there was a way to wrap events then I could simply use one line of code, something like \ \ if (!event.jqueryEvent) { event = $.Event(event); } \ \ ... before continuing using the jQuery API \ \
keywords: 1.7-discuss
milestone: 1.next1.7
resolution: → wontfix
status: openclosed