Onmousemove Killing Nested DIVs' Onclick

Hey All,

I have some div's which have events assigned to them.  I have noticed when I comment out the onmousemove the swapBlocks function is triggered properly, but having onmousemove assigned to the parent div seems to kill any nested events. Also if I "unnest" the redblock div the onclick triggers normally.  Any ideas? The last thing I want to do is write a hitTest function.  I'm working strictly in IE5.5+.

HTML:

<div id="interrClip01">
      <div id="redblock"><img src="images/spacer.gif" border="0" width="15" height="15" /></div>
</div>

JS:

getElement("interrClip01").onmousemove = moveCrosshair;
getElement("redblock").onclick = swapBlocks;

// getElement is a custom function just returning document.getElementById().

fatfeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

timkerCommented:
Are you getting a javascript error? What is it?
fatfeAuthor Commented:
I'm not getting any errors which is confusing me.  The function attached to the nested onclick event is never called.  Like I said when I comment out the line attaching onmousemove to the container div everything works fine, but once both are in play the inner onclick never executes.
timkerCommented:
Please excuse me if some of the questions I ask seem obvious. I don't know how familiar you are with web technologies. Not trying to offend.

The error would be a javascript error and may only show "error" in the lower left corner of the status bar at the bottom of the browser. Double-clicking that and choosing to show details will get the error message if there is any.

Any reason you are attaching the events using javascript instead of putting them into the actual form elements?
<div id="interrClip01" onmousemove="moveCrosshair()">
     <div id="redblock" onclick="swapBlocks()"><img src="images/spacer.gif" border="0" width="15" height="15" /></div>
</div>

This is very puzzling without any error message. All I can suggest is that you might try embedding the event as above, change the onclick event to onmouseup, and try cancelling event bubbling.

Try some simple scripts in place of your current event handlers:
<div id="interrClip01" onmousemove="alert(this.id)">
     <div id="redblock" onclick="alert(this.id)"><img src="images/spacer.gif" border="0" width="15" height="15" /></div>
</div>

If this works, restore your original event handlers but add "alert("YES");" as the first line of the swapBlocks function. If you get the alert then continue to move it down through the function one line at a time until it stops working. When it stops working, the line above your alert will be the source of the problem.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fatfeAuthor Commented:
Hi Timker,

I received no IE errors what-so-ever.  Ended up creating a hitTest function and everything works now.  Wierd, yes, I know.  But the hitTest works and I'm going to stick with that on this.  Thanks all.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.