Click and drag element with overflow: hidden doesn't trigger onmouseout in firefox

Question

It works fine in chrome but not in firefox, in firefox it triggers once you release outside the box, and then move your cursor. Any ideas what causes this behaviour and are there any ways around it?

 var testDiv = document.getElementById("testDiv"); testDiv.onmouseout = function () { alert("Triggered."); }; 

 #testDiv { overflow: hidden; width: 100px; height: 100px; background-color: green; } 

  <div id="testDiv"></div> 

So click and hold inside the green square, then move your cursor outside.

Mirror on JSFiddle: http://jsfiddle.net/5ntLgyow/

Answer 1

Add the last line. firefox has default function for drag so prevent default on mouse down will do.

var testDiv = document.getElementById("testDiv");
testDiv.onmouseout = function () {
    alert("Triggered.");
};

testDiv.onmousedown=function(e){e.preventDefault();}