NEW126711
mouseleave event fires for leaving elements inside the shadow DOM of input[type]=range 
https://bugs.webkit.org/show_bug.cgi?id=126711
Summary mouseleave event fires for leaving elements inside the shadow DOM of input[ty...
Xabier Rodríguez Calvar
Reported 2014-01-09 12:17:16 PST
Given the following HTML code: <html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id + ", inner id: " + inner.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html> Steps: 1) Open the the code in the browser 2) Move the mouse to the green div 3) Move the mouse out of the green div 4) Move it in again 5) Move it to the input range (out of the thumb) 6) Move it onto the thumb Chromium outcome: 5) Number not increased and debug is "event target id: inner" 6) Number not increased and debug remains "event target id: inner" WebKitGTK+: 5) Number increased and debug is "event target id:" 6) Number not increased and debug changes to "event target id: inner" For some reason in WebKitGTK+ we are not handling those events correctly.
Attachments
Add attachment proposed patch, testcase, etc.
Xabier Rodríguez Calvar
Comment 1 2014-01-09 12:18:25 PST
(In reply to comment #0) It looks like I pasted too much code, the good one is: <html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id + ", inner id: " + inner.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html>
Zan Dobersek
Comment 2 2014-01-10 00:28:36 PST
Fiddle: http://jsfiddle.net/eE563/
Xabier Rodríguez Calvar
Comment 3 2014-01-10 02:04:45 PST
It also happens in Mac, so I assume the bug is crossplatform, removing [GTK] label.
Xabier Rodríguez Calvar
Comment 4 2014-01-10 02:33:08 PST
According to the shadow dom, the range is composed by three divs, being the innest one the thumb and that's the one signalling itself as id="inner" in the example. Anyway, one of the other two divs must be firing that other problematic event that shouldn't be happening because we shouldn't be firing those events for things in the shadow dom, I guess.
Ryosuke Niwa
Comment 5 2014-01-10 11:03:28 PST
Could you precisely explain what the problem is, and what the expected outcome is? How "incorrect" is it?
Xabier Rodríguez Calvar
Comment 6 2014-01-10 16:44:02 PST
(In reply to comment #5) > Could you precisely explain what the problem is, and what the expected outcome is? How "incorrect" is it? Sorry, I should have said that I consider the Chromium one as the correct. The explanation can be read partially in comment 4, but summing up: if you read the event.relatedTarget when going out from the green div to the range input, you should be receiving the range input. That isn't happening. From the DOM POV the range input should behave as a single component and it is not. You receive one event when 'leaving' to the range and another when 'leaving' to the range thumb instead.
Ryosuke Niwa
Comment 7 2014-01-10 16:47:51 PST
Thanks for the clarification.
Note You need to log in before you can comment on or make changes to this bug.