div.mouseEnabled = false
I’m starting to port some projects done in Flash to HTML5 / Javascript and, one thing I missed in one of these ports is the ability to tell a div to just ignore the mouse. You know, like we do in Flash with an InteractiveObject.
So, after researching a bit, I’ve found this nice solution used by Twitter. You can just use .someClass { pointer-events: none; } and the interactivity is gone for the div and any elements within it.
I’ve used it with the jQuery $("#myDiv").css("pointer-events", "none"); and it worked just as expected.
It seems that this is an SVG thing, that browsers implemented and it works with regular HTML / CSS.
Note that this hack works only with Firefox 3.6+, Safari 4+ and Google Chrome.
Source: stackoverflow.com
