Search code examples
jqueryflashbackbone.jsunderscore.jszeroclipboard

ZeroClipboard - mouse events don't fire

I've been implementing ZeroClipboard into an application and I've hit a snag getting mouse events to register. Details are as follows:

I've implemented this in a Backbone view with CoffeeScript like so:

initialize: ->
   # ZeroClipboard Setup
   client = new ZeroClipboard(@$el)

   # Ready
   client.on "ready", (event) ->
     console.log('ZeroClipboard Ready.')

   # Before Copy
   client.on "beforecopy", (event) ->
     console.log('Before Copy')

   # Copy-To-Clipboard Action
   client.on "copy", (event) ->
     console.log('Copied')
     clipboard = event.clipboardData
     clipboard.setData "text/plain", value

   # After Copy Action
   client.on "aftercopy", (event) =>
     console.log('AfterCopy')
     @showTooltip()

All of the above code works. The SWF file is being found successfully and the ready, beforecopy, copy, and aftercopy events work beautifully. I see all the expected console logging.

However - when I try to implement the supported mouse interaction events, I get nowhere. I've tried the following with no success:

client.on "mouseenter", (event) ->
  console.log('MouseOver')

# # # # # # # # # # 

client.on "mouseover", (event) ->
  console.log('MouseOver')

# # # # # # # # # # 

client.on "mousedown", (event) ->
  console.log('MouseOver')

I can't get as much as a console.log out of any of these events. There are no other JS errors and by all appearances ZeroClipboard is working quite well.

I've unsuccessfully tried adding an event listener like so:

client.addEventListener "mouseover", (event) =>
  console.log('HoverState')

It doesn't appear that it will work because the client is a ZeroClipboard object and 'addEventListener' is not a member function of its class.

I did venture into the ZeroClipboard.js file and add some console.log() statements where the mouseover event should be firing, and they output successfully. Thus I can (mostly) rule out that it's an issue in ZeroClipboard's event implementation and conclude that it's almost definitely something wrong with my code, though after spending the better part of the afternoon sleuthing I have come up empty handed in regards to a viable solution.

If somebody could please lend a hand I would be most appreciative - thanks in advance!

Solution

  • I might be misreading ZeroClipboard doc on events, but as far as I can tell it only emits ready / beforecopy / copy / aftercopy / destroy / error events but it does propagate DOM events:

    Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mousedown effects.

    That means that you can use you DOM node as in any other Backbone view and, for example, declare a hash of events (JS example):

    var ZCView = Backbone.View.extend({
    events: {
        'mouseenter': function() {
            console.log('mouseenter');
        },
        'mouseover': function() {
            console.log('mouseover');
        }
    },
    initialize: function() {
        var client = new ZeroClipboard(this.el);

        client.on("ready", function() {
            console.log('ready');
        });
        client.on("beforecopy", function() {
            console.log('beforecopy');
        });
    }
});

    And a demo http://jsfiddle.net/sn1ccpqw/