My project uses event handlers for onmousedown and onmouseup. When these event handlers are registered for the document object the select boxes are not clickable anymore. It seems that that the handler is consuming all mouse events which prevents the select box from handling it. This happens only on safari and on all mac and windows versions (as far as I could test that). Now I have registered the handlers for the appropriate div alone and it works flawlessly. // this will cause a problem on apple safari // // document.onmousedown = MouseDown; // document.onmouseup = MouseUp; // // now the solution for all browsers // x = document.getElementById("cage_image"); if (x) { x.onmousedown = MouseDown; x.onmouseup = MouseUp; } You will find the section in the javascript code of my page. Best regards, Holger Schmeken
Here's the definition of the MouseDown and MouseUp functions from the page: function MouseDown(e) { var found = false; var obj; if (isW3C) { obj = e.target; } else if (isIE) { e = window.event; obj = e.srcElement; } else return; if ( (obj.parentNode.id != null) && (obj.parentNode.id.indexOf(MainId) != -1)) { current = obj.parentNode.style; dx = parseInt(e.clientX) - parseInt(current.left); if (isW3C) { document.addEventListener("mousemove", MouseDrag, true); current.cursor = "url(ImageGlucosurfer/hand-closed.ico),move"; } else { document.attachEvent("onmousemove", MouseDrag); current.cursor = "url(ImageGlucosurfer/hand-closed.ico),move"; } } else { current = null; } return false; } function MouseUp(e) { var x; if (isW3C) { document.removeEventListener("mousemove", MouseDrag, true); } else if (isIE) { document.detachEvent("onmousemove", MouseDrag); } if (current) { current.cursor = "url(ImageGlucosurfer/hand-open.ico),default"; } current = null; return false; }
The event handlers are returning false or undefined, which means that the default processing of the event is being blocked. In general Safari is behaving correctly here, but I wonder if we should consider behaving more like IE/FFx and never let the <select> menu action be blocked?
Could you please clarify how to reproduce the problem? The only non-clickable select I see (Zoom) is not a descendant of cage_image div, so the mouse event handler is not invoked. And this select is also disabled in Firefox.
> The only non-clickable select I see (Zoom) is not a descendant of cage_image > div, so the mouse event handler is not invoked. And this select is also > disabled in Firefox. The page is now compatible with Safari. The non-clickable select (Zoom) is non-clickable on purpose. BUT the select (Diagram) was not clickable when the event handler was registered for the document. Adam Robens response was that my Mouse Handler has caused the problem by returning improper return values. The other browsers seem handle this situation in a more friendly way. They will allow the select box to handle the mouse messages - even when the handler is misbehaving.
adam are you sure return false/undefined prevents default handling from occuring, i thought it was the other way round (although i really can remember for sure). Given functions return undefined by default that would imply a simple handler would result in blocking the default behaviour, which seems unlikely.
WebKit handling is correct here IMO. I think we should file a bug on Firefox/Gecko about this issue.
Hi Dave, > WebKit handling is correct here IMO. I think we should file a bug on > Firefox/Gecko about this issue. FireFox, IE, Opera, Konqueror and many other browsers will handle their select boxes even with buggy handlers. This means that many pages will exist where designers have made the same mistake that I did. In conclusion Safari can fail on these pages so I would recommend a fault tolerant handling of the problem.