event.x, event.y, event.clientX and event.clientY

I have the following code:

/* ==== mouse move event ==== */
mousemove : function (e) {
	if (window.event) e = window.event;
	prx.xm = (e.x || e.clientX) - prx.nx + (prx.nw * .5);
	prx.ym = (e.y || e.clientY) - prx.ny + (prx.nh * .5);
},

Code (markup):

This moves objects in 3D-ish space and works fine in both Firefox and IE. However, when I place yet another object (DOM object???) inside this framework, a certain problem occurs. When I move the mouse cursor over this inner object, the whole page jerks a bit. I figured that the code above creates this problem. I also figured that e.x and e.y mess this up. If I use the code below,

/* ==== mouse move event ==== */
mousemove : function (e) {
	if (window.event) e = window.event;
	prx.xm = (e.clientX) - prx.nx + (prx.nw * .5);
	prx.ym = (e.clientY) - prx.ny + (prx.nh * .5);
},

Code (markup):

everything works fine, but there must be a reason why e.x and e.y are here. I don't know the reason, however. So, I have the following questions.

q1. Exactly what are e.x and e.y?

q2. What do e.x || e.clientX and e.y || e.clientY return?

q3. Why do e.x and e.y get messed up when there is an inner (DOM???) object?

q4. How can I address this problem properly?