David wrote:
Ok, so let me clarify what I meant, I have the img tag nest inside a div tag
and the img tag click event NEEDS to bubble and not be cancelled. So is
there any other way to go about cancelling drag?
Well the event continues to bubble, what I suggested is to use
preventDefault() which prevents the default action but not
stopPropagation() which would prevent the event propagation.
Here is a short and simple test case for Mozilla and Opera 8:
<html lang="en">
<head>
<title>difference between preventDefault and stopPropagation</title>
<script type="text/javascript">
function output (tagName, text) {
var element = document.createElement(tagName);
element.appendChild(document.createTextNode(text)) ;
document.body.appendChild(element);
}
</script>
</head>
<body>
<h1>difference between preventDefault and stopPropagation</h1>
<h2>div element whith image which should not allow dragging</h2>
<div id="div1"
style="border: 1px solid green;"
onmousedown="output('p', 'div handles ' + event.type);"
onclick="output('p', 'div handles ' + event.type);"
onmouseup="output('p', 'div handles ' + event.type);">
<p>Here is a div with an img element where the normal drag operation the
browser offers is prevented:
<img src="kiboInside.gif" alt="Kibo inside"
onmousedown="if (event.preventDefault) {
event.preventDefault();
}">
</p>
</div>
<hr>
<h2>debug output of events</h2>
</body>
</html>
You will find that the <div> element containing the <img> will get any
events as events still propagate.
I think in my first answer I had also some return false in the event
handler but that should then not be used.
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
