Passing a direction pointer based on user input.

Determining bidirectionality is simple enough—the mouse event points either one way or the other. But what about all four sides? How, for example, do you determine whether a mouse event in the upper-rightish corner goes to the top or the right?

Logically, whichever side the pointer is actually closest to is the one that should return. That’s what I’m doing here.

Determine the ratio of the JavaScript event to each of the four edges of the element. The one with the lowest ratio—that is, closest edge, is the edge to return.

To keep object independence, we trigger an event with the selcted edge and the ratio as parameters to be picked up by event listeners.

Hover over the element to determine the closest edge.

Le Code: