Event.target issue in firefox

Question

I am creating my own drag and drop script in html/javascript as a part of my website. It all works fine except when I tried it in firefox. I did some debugging and found out that firefox returns the wrong target from event.target.

Here is the important part of the code,

$(document).bind({
  'mousemove' : function(e){
     console.log(e);

+ a lot more code +

var obj = e.target;
 if(obj.className == "sidebarItem"){
    dt.root.handleHover(e.target);
  }else if(obj.className == "sidebarItemText"){
   dt.root.handleHover(e.target.parentNode);
  }

(I just typed this code here so there might be some syntax errors, but you guys get the idea of how it works)

This code gets binded when the user clicks on the div that is "draggable" and gets unbinded as soon as they release their mouse button again.

All works fine in IE and Chrome, it gives the right div where is it hovering over, but in firefox event.target returns a div that is not even close to the mouse (It is a div behind that div that actually captures the first click, it is set with a relative position).

This is the situation

----------
|a | bbbb
|a | bbbb
|a | bbbb

a = drag target

b = where it is dragged from, and also the div that firefox returns

Anyone knows what I'm doing wrong here?

EDIT:

I found out that the div that always returned as event.target is acting weird because of the overflow-y: auto; When I turned it off it worked fine but the overflow has to be there.. Still no clue how to fix this :<

Answer 1

event.target returns it to the target where the event was dispatched. Check this out for more https://developer.mozilla.org/en/DOM/EventTarget . Perhaps u can readjust the element so as to set the element above the element that fires the event to have the event.