简体   繁体   中英

In jQuery how to fire an elements event added in mootools?

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!

        });
    }
});

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM