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!

        });
    }
});
2
  • I dont have difficulties to add the event... to call the event of an element of my choice.
    – Alex
    Commented Oct 10, 2013 at 10:52
  • You could use javascripts this.fireEvent('mouseenter') - Check this: jsfiddle.net/AeBQ8
    – Sergio
    Commented Oct 10, 2013 at 11:06

1 Answer 1

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
2
  • Would this.fireEvent('mouseenter') without jQuery selector be ok also?
    – Sergio
    Commented Oct 10, 2013 at 11:29
  • 2
    actually - you are right, this should be the raw element. I don't use much jQuery :) Commented Oct 10, 2013 at 11:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.