Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouse events not working in firefox #366

Open
heyarny opened this issue Nov 26, 2015 · 2 comments
Open

Mouse events not working in firefox #366

heyarny opened this issue Nov 26, 2015 · 2 comments

Comments

@heyarny
Copy link

heyarny commented Nov 26, 2015

I'm using the latest maven of gwtquery. Firefox is up-to-date.

I noticed the mouse events are not passed to the parent element if there is a anchor element inside.
This happens on firefox and with gwtquery only.

Works fine on Safari & Chrome

Example

<style>
<!--
.test-box1 {
    position:relative;
    display:block;
    width:300px;
    height:300px;
    background:white;
}
.test-box2 {
    position:absolute;
    display:block;
    top:0;right:50px;bottom:50px;left:0px;
    background:blue;
    opacity:0.5;
}
.test-box3 {
    display:block;
    width:100px;
    height:100px;
    background:yellow;
}
-->
</style>

<div id="testbox" class="test-box1">
    <a href="javascript:;" class="test-box2">
        <span class="test-box3"></span>
    </a>
</div>
final Element testElm = $("#testbox").get(0);
$(testElm).on("mouseover", testElm, new Function() {
            public boolean f(Event event, Object... obj) {
                Element item = (Element) obj[0];
                $(item).css("backgroundColor", "red");
                return true;
            }
        })
        .on("mouseout", testElm, new Function() {
            public boolean f(Event event, Object... obj) {
                Element item = (Element) obj[0];
                $(item).css("backgroundColor", "white");
                return true;
            }
        });

There is something failing and I can't figure out the reason.

@Elrhino
Copy link
Member

Elrhino commented Dec 7, 2015

Hi Arnold,

I think the best way to ensure cross browser compatibility would be to use the GQuery mouserover() and mouseout() functions.

$(testElem).mouseover(new Function() {
            public boolean f(Event event, Object... obj) {
                Element item = (Element) obj[0];
                $(item).css("backgroundColor", "red");
                return true;
            }
        })
        .mouseout(new Function() {
            public boolean f(Event event, Object... obj) {
                Element item = (Element) obj[0];
                $(item).css("backgroundColor", "white");
                return true;
            }
        });

I tested it on Firefox 42. Let me know if the problem still persist.

@heyarny
Copy link
Author

heyarny commented Dec 7, 2015

@Elrhino thank you, but for your information:

public GQuery mouseenter(Function... f) {
    if (f == null || f.length == 0) {
      // handle trigger of mouseleave
      return triggerHtmlEvent("mouseenter");
    }

    return bind("mouseenter", null, f);
  }

So, there is no difference what way you use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants