A Simple Javascript Model-View-Controller API

Model-View-Controller is such a useful and powerful design pattern. You can use MVC for more than just physical views (i.e. GUI’s), but abstract views as well (e.g. pure data structures). You can even use MVC as an event mechanism.
Continue reading

Allowing events to fall-through div regions

I have been on a mammoth quest to discover how to redirect events from a large transparent div (covering a whole web page) to elements below the div region. At this point I have not found a solution. However progress was made and such info could save a hell of a lot of time for some people who share such a quest!

First thing I achieved was to capture all mouse events on the transparent div and discover the underlying elements at which the mouse was over. This was achievable using object.elementFromPoint(x,y). It seems to be supported by both Mozilla and IE. I’m not sure about others.  I used Dojo for cross-browser event handling. Before elementFromPoint can be used you must somehow hide the div then afterwards show it again, you could adjust the style or remove/append the actual node. NB: this does not introduce flickering. Here is example code:


divElement.style.visibility = "hidden";
var targetElement = document.elementFromPoint(evt.clientX, evt.clientY);
divElement.style.visibility = "visible";

Note that when capture mouse events, capture all DOM and browser-specific events (e.g. DND events).

At this point we want to re-fabricate the event as if it were to be sent to targetElement. This is where I have racked my brains for the last day 😮  Originally I redirected the event by using targetElement.dispatchEvent or targetElement.fireEvent (depending on the browser support), however the results are very temperamental: sometimes things work and most times the event does not do anything! Very frustrating. I read here: (http://www.howtocreate.co.uk/tutorials/javascript/domevents) that firing “fake” events so not cause the default action to occur due to security reasons etc. So now this approach is looking grim. It makes me wonder though about how on earth sometimes the default actions execute.

One of my theories is that it has to do with threading and events. For example, maybe the default action will only execute if the div is still invisible (or non-existent) at the time of the events execution. Therefore the div’s visible property must be set to “visible” after the default action (supposedly) occurs. I ran some tests and this theory does seem to stand. Plus event threading support with JavaScript is virtually non-existent.

If worst comes to worse and no elegant solution can be found, I may have to resort into implementing the “default action” in JavaScript which may be a nightmare!