thr3ads.net - Rails spinoffs - circumvent default event bubbling [Jun 2008]

If this information is useful, please help other people find it:
Share via:

I. E. Smith-Heisters

2008-Jun-16 18:28 UTC

circumvent default event bubbling

Hi all,

I''m doing a drag-proxy like this:

---
    this.element = element;

    this._proxy = this.element.cloneNode(true);
    this._proxy.absolutize();
    this._proxy.style.opacity = 0.7;
    this._proxy.clonePosition(element);

    this._proxy.observe(''mouseup'', this.destroy.bind(this));
    this.element.observe(''mouseup'', this.destroy.bind(this));

    document.body.appendChild(this._proxy);
    new Draggable(this._proxy).initDrag(ev);
---

which is necessary so that the draggable is rendered as a child of
document.body and therefore can float over scrollable divs.

However, now the proxy captures mouseup events, which nullifies the
original element''s click and doubleclick events (probably not the best
idea to have mousdown, up, click, and doubleclick all on one element,
but oh well). So I want to route event bubbling from the proxy to the
parent, but keep the proxy a child of document.body. I think I only
really need to route mouseup. So I tried this:

---
    this._proxy.observe(''mouseup'', function(ev)
{this.element.dispatchEvent(ev);}.bind(this));
---

but that throws this error, which is rather incomprehensible:

---
[Exception... "Component returned failure code: 0x80070057
(NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]" nsresult:
"0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame ::
http://localhost:3000/javascripts/behaviors.js?1211228591 ::
anonymous :: line 12" data: no]
---

Can anyone please shed some light on how to approach this problem?

Thanks,
Ian
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

kangax

2008-Jun-16 20:07 UTC

head link

Re: circumvent default event bubbling

I believe that dispatchEvent accepts a manually instantiated event
only. Moreover, this won''t work in IE, which follows (surprise!) its
own standard (fireEvent). It looks like one of the solutions would be
to work with custom events, as they allow for a more flexibility.

- kangax

On Jun 16, 2:28 pm, "I. E. Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:> Hi all,
>
> I''m doing a drag-proxy like this:
>
> ---
>     this.element = element;
>
>     this._proxy = this.element.cloneNode(true);
>     this._proxy.absolutize();
>     this._proxy.style.opacity = 0.7;
>     this._proxy.clonePosition(element);
>
>     this._proxy.observe(''mouseup'',
this.destroy.bind(this));
>     this.element.observe(''mouseup'',
this.destroy.bind(this));
>
>     document.body.appendChild(this._proxy);
>     new Draggable(this._proxy).initDrag(ev);
> ---
>
> which is necessary so that the draggable is rendered as a child of
> document.body and therefore can float over scrollable divs.
>
> However, now the proxy captures mouseup events, which nullifies the
> original element''s click and doubleclick events (probably not the
best
> idea to have mousdown, up, click, and doubleclick all on one element,
> but oh well). So I want to route event bubbling from the proxy to the
> parent, but keep the proxy a child of document.body. I think I only
> really need to route mouseup. So I tried this:
>
> ---
>     this._proxy.observe(''mouseup'', function(ev)
> {this.element.dispatchEvent(ev);}.bind(this));
> ---
>
> but that throws this error, which is rather incomprehensible:
>
> ---
> [Exception... "Component returned failure code: 0x80070057
> (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]" nsresult:
> "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame
::http://localhost:3000/javascripts/behaviors.js?1211228591::
> anonymous :: line 12" data: no]
> ---
>
> Can anyone please shed some light on how to approach this problem?
>
> Thanks,
> Ian--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ian Smith-Heisters

2008-Jun-16 20:14 UTC

head link

Re: circumvent default event bubbling

Thanks kangax.

I''m only supporting Firefox, so IE incompatibility isn''t an
issue :D

I''d tried something with custom events and .fire(), but I
couldn''t
figure out how to use that to fire the "mouseup" event, which is the
one I need. Are you suggesting that there''s some way to replace the
mouseup event with a custom event?

Thanks again,
Ian

On Mon, Jun 16, 2008 at 1:07 PM, kangax
<kangax-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> I believe that dispatchEvent accepts a manually instantiated event
> only. Moreover, this won''t work in IE, which follows (surprise!)
its
> own standard (fireEvent). It looks like one of the solutions would be
> to work with custom events, as they allow for a more flexibility.
>
> - kangax
>
> On Jun 16, 2:28 pm, "I. E. Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
>> Hi all,
>>
>> I''m doing a drag-proxy like this:
>>
>> ---
>>     this.element = element;
>>
>>     this._proxy = this.element.cloneNode(true);
>>     this._proxy.absolutize();
>>     this._proxy.style.opacity = 0.7;
>>     this._proxy.clonePosition(element);
>>
>>     this._proxy.observe(''mouseup'',
this.destroy.bind(this));
>>     this.element.observe(''mouseup'',
this.destroy.bind(this));
>>
>>     document.body.appendChild(this._proxy);
>>     new Draggable(this._proxy).initDrag(ev);
>> ---
>>
>> which is necessary so that the draggable is rendered as a child of
>> document.body and therefore can float over scrollable divs.
>>
>> However, now the proxy captures mouseup events, which nullifies the
>> original element''s click and doubleclick events (probably not
the best
>> idea to have mousdown, up, click, and doubleclick all on one element,
>> but oh well). So I want to route event bubbling from the proxy to the
>> parent, but keep the proxy a child of document.body. I think I only
>> really need to route mouseup. So I tried this:
>>
>> ---
>>     this._proxy.observe(''mouseup'', function(ev)
>> {this.element.dispatchEvent(ev);}.bind(this));
>> ---
>>
>> but that throws this error, which is rather incomprehensible:
>>
>> ---
>> [Exception... "Component returned failure code: 0x80070057
>> (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"
nsresult:
>> "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS
frame ::http://localhost:3000/javascripts/behaviors.js?1211228591::
>> anonymous :: line 12" data: no]
>> ---
>>
>> Can anyone please shed some light on how to approach this problem?
>>
>> Thanks,
>> Ian
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

kangax

2008-Jun-16 20:31 UTC

head link

Re: circumvent default event bubbling

Well, if you make Draggable listen to "mouse:up" and will then fire
"mouse:up" via "proxy", I don''t see why this
shouldn''t work ; )

- kangax

On Jun 16, 4:14 pm, "Ian Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:> Thanks kangax.
>
> I''m only supporting Firefox, so IE incompatibility isn''t
an issue :D
>
> I''d tried something with custom events and .fire(), but I
couldn''t
> figure out how to use that to fire the "mouseup" event, which is
the
> one I need. Are you suggesting that there''s some way to replace
the
> mouseup event with a custom event?
>
> Thanks again,
> Ian
>
> On Mon, Jun 16, 2008 at 1:07 PM, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > I believe that dispatchEvent accepts a manually instantiated event
> > only. Moreover, this won''t work in IE, which follows
(surprise!) its
> > own standard (fireEvent). It looks like one of the solutions would be
> > to work with custom events, as they allow for a more flexibility.
>
> > - kangax
>
> > On Jun 16, 2:28 pm, "I. E. Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
> >> Hi all,
>
> >> I''m doing a drag-proxy like this:
>
> >> ---
> >>     this.element = element;
>
> >>     this._proxy = this.element.cloneNode(true);
> >>     this._proxy.absolutize();
> >>     this._proxy.style.opacity = 0.7;
> >>     this._proxy.clonePosition(element);
>
> >>     this._proxy.observe(''mouseup'',
this.destroy.bind(this));
> >>     this.element.observe(''mouseup'',
this.destroy.bind(this));
>
> >>     document.body.appendChild(this._proxy);
> >>     new Draggable(this._proxy).initDrag(ev);
> >> ---
>
> >> which is necessary so that the draggable is rendered as a child of
> >> document.body and therefore can float over scrollable divs.
>
> >> However, now the proxy captures mouseup events, which nullifies
the
> >> original element''s click and doubleclick events (probably
not the best
> >> idea to have mousdown, up, click, and doubleclick all on one
element,
> >> but oh well). So I want to route event bubbling from the proxy to
the
> >> parent, but keep the proxy a child of document.body. I think I
only
> >> really need to route mouseup. So I tried this:
>
> >> ---
> >>     this._proxy.observe(''mouseup'', function(ev)
> >> {this.element.dispatchEvent(ev);}.bind(this));
> >> ---
>
> >> but that throws this error, which is rather incomprehensible:
>
> >> ---
> >> [Exception... "Component returned failure code: 0x80070057
> >> (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"
nsresult:
> >> "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS
frame ::http://localhost:3000/javascripts/behaviors.js?1211228591::
> >> anonymous :: line 12" data: no]
> >> ---
>
> >> Can anyone please shed some light on how to approach this problem?
>
> >> Thanks,
> >> Ian--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

T.J. Crowder

2008-Jun-17 08:48 UTC

head link

Re: circumvent default event bubbling

On Jun 16, 9:14 pm, "Ian Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
> I''m only supporting Firefox, so IE incompatibility isn''t
an issue :D
Nirvana.  I have had a glimpse of Nirvana.

-- T.J. ;-)

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Matt Foster

2008-Jun-17 18:50 UTC

head link

Re: circumvent default event bubbling

Have you looked into scriptaculous''s draggable/sortable classes?

http://github.com/madrobby/scriptaculous/wikis/draggable



--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com



On Jun 17, 4:48 am, "T.J. Crowder"
<t...-MUGVhKWuB3Yd9SLi6J12IkEOCMrvLtNR@public.gmane.org>
wrote:> On Jun 16, 9:14 pm, "Ian Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
>
> > I''m only supporting Firefox, so IE incompatibility
isn''t an issue :D
>
> Nirvana.  I have had a glimpse of Nirvana.
>
> -- T.J. ;-)--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ian Smith-Heisters

2008-Jun-17 19:20 UTC

head link

Re: circumvent default event bubbling

This is a modification of those classes. You have to reattach the
draggable to the body in order for it to "float" outside of divs that
hide their overflow (eg. where you have divs that are scrollable
independent of the window). The problem being that in creating the
proxy that gets attached to the body, it intercepts mouse events and
then bubbles them up to the body, circumventing the original div. The
solution I actually ended up with is to set the proxy with a lower
z-index than the original div, which makes the mouse events go to the
original. I don''t think this will work in all situations, and
I''m very
skeptical of its versatility--but it seems to work for me for the
moment.

On Tue, Jun 17, 2008 at 11:50 AM, Matt Foster
<mattfoster01-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Have you looked into scriptaculous''s draggable/sortable classes?
>
> http://github.com/madrobby/scriptaculous/wikis/draggable
>
>
>
> --
> Matt Foster
> Ajax Engineer
> Nth Penguin, LLC
> http://www.nthpenguin.com
>
>
>
> On Jun 17, 4:48 am, "T.J. Crowder"
<t...-MUGVhKWuB3Yd9SLi6J12IkEOCMrvLtNR@public.gmane.org> wrote:
>> On Jun 16, 9:14 pm, "Ian Smith-Heisters"
<i...-ZMJO0lPjCCA@public.gmane.org> wrote:
>>
>> > I''m only supporting Firefox, so IE incompatibility
isn''t an issue :D
>>
>> Nirvana.  I have had a glimpse of Nirvana.
>>
>> -- T.J. ;-)
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Jun 2008 - circumvent default event bubbling

circumvent default event bubbling

Re: circumvent default event bubbling

Re: circumvent default event bubbling

Re: circumvent default event bubbling

Re: circumvent default event bubbling

Re: circumvent default event bubbling

Re: circumvent default event bubbling