Chrome 25 event bubbling #129

Closed
theBlbDan opened this Issue Mar 28, 2013 · 13 comments

5 participants

@theBlbDan

I've noticed that the embedded flash object does not bubble events in Chrome. I have a click event handler for the document body that handles spurious events when no other event handler is defined or triggered for an element; things like closing cascaded menus, etc.

I know I can work around this, somewhat, by using the clip.on() method, but I was wondering if this is expected and unavoidable.

@JamesMGreene
ZeroClipboard member

It is expected and currently unavoidable. However, in practice, I'm confident that resolving #81 will allow it to act as you are expecting for all mouse events other than "click" (by default).

I believe we could also facilitate a click bubbling workaround (disabled by default, enabled by config) by having our "complete" event also trigger a "click" event on the associated glued element. It might not be a perfectly matched event, i.e. may not have the exact same x/y coordinates and metadata as the original click event... though I think we can actually fix that, too, if we add a listener on the "mouseup" event for the glued element being hovered over to collect and remember that event data/metadata!

@JamesMGreene
ZeroClipboard member

On second thought, if you are only concerned with "click" in particular, you could probably do what I described [even in the current version] in a clip.on("complete", ...) handler:

  1. Get the associated glued element
  2. Fire/dispatch a "click" event on that element (which is not equivalent to element.click();... look it up, or use a library like jQuery).
@JamesMGreene JamesMGreene was assigned May 7, 2013
@JamesMGreene
ZeroClipboard member
@jbrooksuk

I'm experiencing a weird issue, which I think may be related to this.

For my project, I'm using Bootstrap, specifically I'm placing ZeroClipboard on top of a dropdown item which works fine, text gets copied when I click on it. However, when I hover the item, it quickly changes to an active item, then removes its active styles, which I assume is caused by the SWF object being loaded on top. Shouldn't the SWF be invisible and still bubble events down to the DOM?

@JamesMGreene
ZeroClipboard member

@jbrooksuk: Probably more like a duplicate of #81. IIRC, we just need to remove our ActionScript mouse handlers for everything but click and then this should behave as expected for you. Most likely we wouldn't remove them so much as port them over into the JavaScript portion of the library.

@jbrooksuk

@JamesMGreene yeah, #81 looks much more like it. What I've done for now is apply some styles on .zeroclipboard-is-hover to replicate the dropdown item.

@JamesMGreene
ZeroClipboard member

The old jquery.zclip plugin [which wrapped ZeroClipboard] did basically exactly what I described earlier in this thread:

On second thought, if you are only concerned with "click" in particular, you could probably do what I described [even in the current version] in a clip.on("complete", ...) handler:

  1. Get the associated glued element
  2. Fire/dispatch a "click" event on that element (which is not equivalent to element.click();... look it up, or use a library like jQuery).

jquery.zclip made this behavior optional via a clickAfter Boolean config option. I think doing the same in ZeroClipboard itself would make a lot of sense, though I'd probably suggest renaming the option to something like bubbles, bubbleClicks, clickBubbles, allowBubble, etc.

@jonrohan: Thoughts on this idea? If in favor, thoughts on a good name for that config option?

@SomethingSexy

I like this idea. I think I am having a similar problem with using this library inside of a Bootstrap downdown menu. When clicking the button it is closing my menu.

@jbrooksuk
@SomethingSexy

That would be fantastic! Thanks.

@JamesMGreene
ZeroClipboard member

FYI, this is in-plan for v2.0.0 as the bubbleEvents config option: https://gist.github.com/JamesMGreene/7886534#global-configuration

@paltman

@jbrooksuk any luck finding the code? I have it wired up ok, however, once i hover on the zeroclipboard link that is in my dropdown menu, the menu loses hover and disappears leaving the link visible.

@jbrooksuk

Here is how I did it. In my example, the clipboard item is a list item.

new ZeroClipboard($('[data-clipboard-text]'), {
    moviePath: "/vendor/ZeroClipboard.swf"
})

App.clip.glue($('li[data-clipboard-text]'));

<li data-clipboard-text="<%= customer.phone_number %>"><a href='#'><i class='entypo clipboard'></i> Copy Phone Number</a></li>
@JamesMGreene JamesMGreene self-assigned this May 21, 2014
@JamesMGreene JamesMGreene added a commit to JamesMGreene/zeroclipboard that referenced this issue May 23, 2014
@JamesMGreene JamesMGreene MouseEvent cleanup... as best as possible.
Fixes #214.
Fixes #212.
Fixes #129.

Closes #81.

Related to #244.
Related to #369.
3916b9b
@JamesMGreene JamesMGreene added a commit to JamesMGreene/zeroclipboard that referenced this issue May 23, 2014
@JamesMGreene JamesMGreene MouseEvent cleanup... as best as possible.
Fixes #212.
Fixes #129.

Closes #214.
Closes #81.

Related to #244.
Related to #369.
2e773cc
@JamesMGreene JamesMGreene added a commit to JamesMGreene/zeroclipboard that referenced this issue May 23, 2014
@JamesMGreene JamesMGreene MouseEvent cleanup... as best as possible.
Fixes #212.
Fixes #129.

Closes #214.
Closes #81.

Related to #244.
Related to #369.
68572da
@JamesMGreene JamesMGreene closed this in #425 May 24, 2014
@corneadoug corneadoug referenced this issue in NFLabs/zeppelin Sep 29, 2014
Closed

Copy To Clipboard (instead of open Iframe link in new Tab) #118

4 of 4 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment