the mousedown and mouseup events are treated.
The issue comes up when there is div on the page that has overflow set to auto
and content too large for the boundaries of the div, so that scrollbars appear.
mousedown and mouseup events have already been attached to the document.
When the user clicks on the interior portion of the div, both the mousedown,
and mouseup events occur.
When the user clicks on the div's scrollbar, the mousedown event occurs, but
not the mouseup.
In Firefox, both the mousedown and mouseup events are fired.
The IE and Opera approaches can cause problems for a program that is trapping
mousedown to initiate a drag, mousemove to implement the drag, and mouseup to
stop the drag.
Sample code to reproduce this behavior is attached.
Has anyone discovered any workarounds for this problem?
Thanks,
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>IEBug</title>
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript" type="text/javascript">
</script>
<style type=text/css>
div.Test
{
overflow:auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding:0;
border-collapse: collapse;
border-style:none;
border-width:0px;
width:500px;
}
</style>
</head>
<body onload="javascript:Attach()">
<div id="testdiv" class="Test">
<table id="tblFixedWidth" style="width: 700px;" border="1">
<thead>
<tr><th colspan="2">The width of this table is set to 700px</th></tr>
</thead>
<tr>
<td>This is the first cell in the first row</td>
<td>This is the second cell in the first row</td>
</tr>
<tr>
<td>This is the first cell in the second row</td>
<td>This is the second cell in the second row</td>
</tr>
</table>
</div>
<br>
<textarea id="Output" rows="20" cols="40"></textarea>
</body>
</html>
<script type="text/javascript">
var Output = document.getElementById("Output");
function Attach()
{
var doc = window.document;
var div = document.getElementById("testdiv");
cbAddEventListener(doc, "mousedown", MD_Test, false);
Output.value += "mousedown attached to document" + "\n";
cbAddEventListener(div, "mousedown", MD_Test, false);
Output.value += "mousedown attached to div" + "\n";
cbAddEventListener(doc, "mouseup", MO_Test, false);
Output.value += "mouseup attached to document" + "\n";
cbAddEventListener(div, "mouseup", MO_Test, false);
Output.value += "mouseup attached to div" + "\n";
}
function cbAddEventListener(objElement, strEventName, funcGen, blnCancelBubble)
{
//=====================================================================
//ACCEPTS:
//objElement - The DHTML object you want to attach the event to
//strEventName - The event you are attempting to attach. This should
// be formatted as all lower case, without the "on" in front. For IE,
// this function will prepend the "on' to the event name
//funcGen - The function which runs when the event fires. This should be
// formatted in the same case as the function definition without the
// trailing parentheses
//blnCancelBubble - The Firefox implementation of events allows you to
// specify whether the event bubbles or not
//RETURNS: Nothing
//=======================================================================
if(document.attachEvent)
{
strEventName = "on" + strEventName;
objElement.attachEvent(strEventName, funcGen);
}
else
{
objElement.addEventListener(strEventName, funcGen, blnCancelBubble);
}//End If document.attachEvent
}//End Function cbAddEventListener
function cbRemoveEventListener(objElement, strEventName, funcGen, blnCancelBubble)
{
//=====================================================================
//ACCEPTS:
//objElement - The DHTML object you want to detach the event from
//strEventName - The event you are attempting to detach. This should
// be formatted as all lower case, without the "on" in front. For IE,
// this function will prepend the "on' to the event name
//funcGen - The function which runs when the event fires. This should be
// formatted in the same case as the function definition without the
// trailing parentheses
//blnCancelBubble - The Firefox implementation of events allows you to
// specify whether the event bubbles or not. For some reason it's still
// there when you detach
//RETURNS: Nothing
//=======================================================================
if(document.detachEvent)
{
strEventName = "on" + strEventName;
objElement.detachEvent(strEventName, funcGen);
}
else
{
objElement.removeEventListener(strEventName, funcGen, blnCancelBubble);
}//End If document.detachEvent
}//End Function cbRemoveEventListener
function MD_Test()
{
Output.value += "mousedown fired" + "\n";
}
function MO_Test()
{
Output.value += "mouseup fired" + "\n";
}
</script>
