I currently have an onMousedown and an onMouseup event handler set on the document that prevents the default action.
However, I have a single form element (a select field) where I want to allow the default action to occur. Is there a way to trigger it from JavaScript?
Perhaps something like this:
<select ... onClick="this.browserDefaultAction">
Of course, "BrowserDefaultAction" is fictional - just to illustrate my point.
EDIT:
To clarify further -
I have a table displaying days (columns) and times (rows in units of 5 minutes). When a user hovers over the table, each cell should display the time it represents.
If the user presses the left mouse button, the times are "set" (cell turns blue), if the right mouse button is pressed, the times are "unset" (cell turns green). This should happen dynamically, without clicking on each cell individually.
Due to issues with detecting the mouse buttons directly within the event script, I added the following code to store the mouse button status in a custom variable:
var MouseButton = 0;
function MousePress(Event) {
if (!Event)
Event = window.event;
if (Event.buttons) {
if (Event.buttons == 2) {MouseButton=2}
if (Event.buttons == 1) {MouseButton=1}
}
}
function MouseRelease() {
MouseButton = 0;
}
document.onmousedown = MousePress;
document.onmouseup = MouseRelease;
This was functioning well even without preventing the default action.
However, moving the mouse while a button was pressed still resulted in cells being marked. While this did not affect functionality, it was visually unappealing and distracting for users. To address this, I simply added a call to Event.preventDefault at the end of the function.
But the issue remained with the select field on the same page. I attempted attaching the onmouseup/down event handlers to the table or a div containing the table instead of the document, but it was unsuccessful.
If anyone wishes to view the page or the full code, here is the link.
EDIT:
I implemented the following approach
test what element triggered the event and then use preventDefault() or not as appropriate
...
if (!Event)
Event = window.event;
if (Event.target.tagName != "SELECT") {
if (Event.buttons)
It is now working as intended.