2

I have a MooTools script (please dont ask why..) where elements are added a mouseenter event. In jQuery, I open/show those elements within a fancybox. When it pops up, the mouseenter event wont get fired in the first place since the cursor is already on an element eventually, depending where the user clicks to open the fancybox. But the jQuery mousemove event does fire on those.

I could just add a mousemove event in the MooTools file which triggers the mouseenter event, but for the sake of learning: how would I fire an elements event function (and make use of the this-reference)? This didnt work for me.

MooTools:

$$('.foo').addEvents({
    mouseenter: function(){
        console.log('fired!'); // never does ):
        // stuff happens here
    }
});

jQuery:

$('#bar').fancybox({
    onComplete: function() {
        $('.foo').unbind('mousemove').mousemove(function() {
            var el = this;
            console.log('mousemoved');
            $('.foo').unbind('mousemove');

            // does not work:
            (function($$) {
                $$(this).fireEvent('mouseenter', $(this));
            })(document.id);

            // neither does this:
            var event;
            if (document.createEvent) {
                event = document.createEvent("HTMLEvents");
                event.initEvent("mousemove", true, true);
            } else {
                event = document.createEventObject();
                event.eventType = "mousemove";
            }

            event.eventName = "mousemove";
            event.memo = {};

            if (document.createEvent) {
                this.dispatchEvent(event);
            }
            else {
                this.fireEvent("on" + event.eventType, event);
            }

            // whats the solution?
            // something like: this.fireEvent('mouseenter', this); would be cool!

        });
    }
});
Community
  • 1
  • 1
Alex
  • 9,911
  • 5
  • 33
  • 52
  • I dont have difficulties to add the event... to call the event of an element of my choice. – Alex Oct 10 '13 at 10:52
  • You could use javascripts `this.fireEvent('mouseenter')` - Check this: http://jsfiddle.net/AeBQ8/ – Sergio Oct 10 '13 at 11:06

1 Answers1

4

Just get to your jQuery Element and then call the fireEvent from the Element.prototype

        // does not work:
        (function($$) {
            $$(this).fireEvent('mouseenter', $(this));
        })(document.id);

to:

$(this)[0].fireEvent('mouseenter' /* optional event obj, { target: $(this)[0] } */);
// or as @Sergio suggests -
this.fireEvent('mouseenter'); // this == element anyway
Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69