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 comment:1
| owner: | → wheresrhys |
|---|---|
| status: | new → pending |
Changed May 17, 2011 02:15PM UTC by comment:2
| status: | pending → new |
|---|
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 comment:3
| component: | unfiled → event |
|---|---|
| status: | new → pending |
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 comment:4
| status: | pending → new |
|---|
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 comment:5
| status: | new → pending |
|---|
So is this what you are looking for?
Changed May 22, 2011 07:27PM UTC by comment:6
| keywords: | → 1.7-discuss |
|---|
Nominating ticket for 1.7 discussion.
Changed May 22, 2011 08:41PM UTC by 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 comment:8
+1, Seems it would be good for interoperability
Changed May 23, 2011 04:55AM UTC by comment:9
+0,
Changed May 23, 2011 12:43PM UTC by comment:10
| status: | pending → new |
|---|
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 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: | undecided → low |
| status: | new → open |
Changed May 24, 2011 10:02PM UTC by 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 comment:13
I think this is not reasonable
Changed June 03, 2011 02:03PM UTC by 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 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 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 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.next → 1.7 |
| resolution: | → wontfix |
| status: | open → closed |
Can you provide some more description of what you mean?