Mouse events not working in firefox

[heyarny]

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]

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]

@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.