(In reply to Holger Benl from comment #42) > Furthermore there's a difference between Firefox and Chrome: in Firefox when the mouse moves from the menu button to the menu, a mousemove event is fired with the document as its target but I never see that target in mousemove events in Chrome. When mouse moves from menu button to menu, a timeout task is scheduled in `mouseout` event listener of menu button in https://www.eclecticgames.co.uk/js/main.js?v=1.1140 ```javascript .bind(this)), this.btn.on("mouseleave", function(t) { this.hoverBtn = !1, setTimeout(this.toggle.bind(this), 20) } ``` I log the event and set a breakpoint on `toggle` method, and found the timeout handler runs in different timing, ---- Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`true`: ``` mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn=""> mouseover <div class="nav-menuCol"> // <==== This set `this.hoverMenu` to `true` mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames // <==== This set `this.hoverMenu` to `false` /// <==== timeout handler runs here, which closes the menu due to `this.hoverMenu` is `false`. mouseover <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mouseout <div class="nav-menuCol"> ``` ---- Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`false`: ``` mouseover <div class="nav-menuCol">. // <==== This set `this.hoverMenu` to `true` mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames. // <=== This set `this.hoverMenu` to `false` mouseover <div class="nav-menuCol"> // <=== This set `this.hoverMenu` to `true` again /// <==== timeout handler runs here mousemove <div class="nav-menuCol"> mouseover <div class="nav-menuCol"> ``` ---- Chrome: ``` mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn>Boardgames & Cardgames</a> mouseover <div class="nav-menuCol">…</div> // <==== This set `this.hoverMenu` to `true` mouseover <div class="nav-menuCol">…</div> //// <==== timeout handler runs here mousemove <div class="nav-menuCol">…</div> mouseover <div class="nav-menuCol">…</div> ```
Bug 1943411 Comment 44 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
(In reply to Holger Benl from comment #42) > Furthermore there's a difference between Firefox and Chrome: in Firefox when the mouse moves from the menu button to the menu, a mousemove event is fired with the document as its target but I never see that target in mousemove events in Chrome. When mouse moves from menu button to menu, a timeout task is scheduled in `mouseout` event listener of menu button in https://www.eclecticgames.co.uk/js/main.js?v=1.1140 ```javascript .bind(this)), this.btn.on("mouseleave", function(t) { this.hoverBtn = !1, setTimeout(this.toggle.bind(this), 20) } ``` I log the event and set a breakpoint on `toggle` method, and found the timeout handler runs in different timing, ---- Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`true`: ``` mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn=""> mouseover <div class="nav-menuCol"> // <==== This set `this.hoverMenu` to `true` mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames // <==== This set `this.hoverMenu` to `false` /// <==== timeout handler runs here, which closes the menu due to `this.hoverMenu` is `false`. mouseover <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mousemove <div class="nav-menuCol"> mouseout <div class="nav-menuCol"> ``` ---- Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`false`: ``` mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn=""> mouseover <div class="nav-menuCol">. // <==== This set `this.hoverMenu` to `true` mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames. // <=== This set `this.hoverMenu` to `false` mouseover <div class="nav-menuCol"> // <=== This set `this.hoverMenu` to `true` again /// <==== timeout handler runs here mousemove <div class="nav-menuCol"> mouseover <div class="nav-menuCol"> ``` ---- Chrome: ``` mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn>Boardgames & Cardgames</a> mouseover <div class="nav-menuCol">…</div> // <==== This set `this.hoverMenu` to `true` mouseover <div class="nav-menuCol">…</div> //// <==== timeout handler runs here mousemove <div class="nav-menuCol">…</div> mouseover <div class="nav-menuCol">…</div> ```
(In reply to Holger Benl from comment #42) > Furthermore there's a difference between Firefox and Chrome: in Firefox when the mouse moves from the menu button to the menu, a mousemove event is fired with the document as its target but I never see that target in mousemove events in Chrome. When mouse moves from menu button to menu, a timeout task is scheduled in `mouseout` event listener of menu button in https://www.eclecticgames.co.uk/js/main.js?v=1.1140 ```javascript .bind(this)), this.btn.on("mouseleave", function(t) { this.hoverBtn = !1, setTimeout(this.toggle.bind(this), 20) } ``` ~~I log the event and set a breakpoint on `toggle` method, and found the timeout handler runs in different timing,~ ---- ~Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`true`:~ ~mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn="">~ ~mouseover <div class="nav-menuCol"> // <==== This set `this.hoverMenu` to `true`~ ~mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames // <==== This set `this.hoverMenu` to `false`~ ~/// <==== timeout handler runs here, which closes the menu due to `this.hoverMenu` is `false`.~ ~mouseover <div class="nav-menuCol">~ ~mousemove <div class="nav-menuCol">~ ~mousemove <div class="nav-menuCol">~ ~mousemove <div class="nav-menuCol">~ ~mouseout <div class="nav-menuCol">~ ---- ~Nightly with `dom.events.mouse-pointer-boundary.keep-enter-targets-after-over-target-removed`=`false`:~ ~mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn="">~ ~mouseover <div class="nav-menuCol">. // <==== This set `this.hoverMenu` to `true`~ ~mousemove HTMLDocument https://www.eclecticgames.co.uk/c/boardgames-cardgames. // <=== This set `this.hoverMenu` to `false`~ ~mouseover <div class="nav-menuCol"> // <=== This set `this.hoverMenu` to `true` again~ ~/// <==== timeout handler runs here~ ~mousemove <div class="nav-menuCol">~ ~mouseover <div class="nav-menuCol">~ ---- ~Chrome:~ ~mouseout <a class="nav-topLink is-active" href="c/boardgames-cardgames" ir-navsubbtn>Boardgames & Cardgames</a>~ ~mouseover <div class="nav-menuCol">…</div> // <==== This set `this.hoverMenu` to `true`~ ~mouseover <div class="nav-menuCol">…</div>~ ~//// <==== timeout handler runs here~ ~mousemove <div class="nav-menuCol">…</div>~ ~mouseover <div class="nav-menuCol">…</div>~ ---- Edit: It turns out not related to timing but the app's handler doesn't run for the `mouseover` after the `mousemove HTMLDocument`. Please see comment# 46.