Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

:relay() doesn't listen to fireEvent #208

Closed
antpaw opened this Issue Feb 11, 2011 · 8 comments

Comments

Projects
None yet
6 participants

antpaw commented Feb 11, 2011

console.log('relay click'); never gets triggered if i rollover my green box. i think it's a bug. relay should be listening for elem.fireEvent();
here is a testcase, you obviously need a mootools-more version with relay support.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div id="box" style="width: 200px; height:200px; background: green"></div>
        <a href="http://google.de" id="plus">+</span>
        <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script> 
        <script src="mootools-more.js"></script> 
        <script>
            $('box').addEvent('mouseenter', function(e){
                $('plus').fireEvent('click', [e]);
            });
            document.body.addEvent('click:relay(a)', function(e){
                console.log('relay click');
                e.preventDefault();
            });
            $$('a').addEvent('click', function(e){
                console.log('fixed click');
                e.preventDefault();
            });
        </script>
    </body>
</html>
Contributor

oskarkrawczyk commented Feb 11, 2011

It's not a bug. The event is attached to document.body not to the link.

antpaw commented Feb 11, 2011

hmm so how can i trigger it?

this doesn't work for me too

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a</title>
    </head>
    <body>
        <div id="box" style="width: 200px; height:200px; background: green"></div>
        <a href="http://google.de" id="plus">+</span>
        <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script> 
        <script src="mootools-more.js"></script> 
        <script>
            $('box').addEvent('mouseenter', function(e){
                document.body.fireEvent('click', [e]);
            });
            document.body.addEvent('click:relay(a)', function(e){
                console.log('relay click');
                e.preventDefault();
            });
            $$('a').addEvent('click', function(e){
                console.log('fixed click');
                e.preventDefault();
            });
        </script>
    </body>
</html>
Owner

subtleGradient commented Feb 25, 2011

This may be an issue with fireEvent in Core more than with :relay in More.

With relay, it shouldn't need to care how the event gets fired.
There may be a need for something like fireNativeEvent, or the equivalent, to fire a proper bubbled event.

Owner

subtleGradient commented Feb 25, 2011

Any chance you could make a jsFiddle of this issue?
Thanks.

antpaw commented Feb 25, 2011

yes

http://jsfiddle.net/antpaw/PsypF/3/

well i don't like that this stuff isn't in sync, because i mean the same element, but i have to start the same event from different elements.

extending the document body with the $ function shoud fix that
http://jsfiddle.net/ipkisius/3U5yT/1/
(the diference is $(document.body).addEvent....)

thedgm commented Jan 6, 2012

Also can call directly that particular function, that was supposed to be executed, or better signal through normal custom event . listener, rather to "hard-bind" to DOM elements (thus de-coupling UI). :D

Member

SergioCrisostomo commented Oct 26, 2015

Closing. I'm cleaning around old issues. Let me know if it should be reopened.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment