Chrome 25 event bubbling #129

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

Comments

Projects
None yet
5 participants

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.

Owner

JamesMGreene commented Mar 28, 2013

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!

Owner

JamesMGreene commented Mar 28, 2013

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 was assigned May 7, 2013

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?

Owner

JamesMGreene commented May 29, 2013

@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.

@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.

Owner

JamesMGreene commented Jul 14, 2013

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?

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.

It's possible to have ZeroClipboard work within a Bootstrap menu. I'll dig out the code for you tomorrow.

Sent from my iPhone

On 17 Dec 2013, at 17:49, Tyler Cvetan notifications@github.com wrote:

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.


Reply to this email directly or view it on GitHub.

That would be fantastic! Thanks.

Owner

JamesMGreene commented Dec 17, 2013

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

paltman commented Jan 10, 2014

@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.

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 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 closed this in #425 May 24, 2014

corneadoug referenced this issue in ZEPL/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