| View previous topic :: View next topic |
| Author |
Message |
dxbrown77
Joined: 16 Dec 2006
Posts: 2
Location: New Jersey, USA
|
 Posted: Sat Dec 16, 2006 4:39 pm Post subject: IE/Opera bug? |
 |
|
I've noticed some seemingly inconsistent behavior in IE and Opera with respect to how
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: |
<!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>
|
[/code] |
|
| Back to top |
|
 |
|
|
dxbrown77
Joined: 16 Dec 2006
Posts: 2
Location: New Jersey, USA
|
| Posted: Sun Dec 17, 2006 12:26 am Post subject: Re: IE/Opera bug? |
|
|
Ok,
I think I've hit on a workaround for my mousedown, mousemove, mouseup scenario.
On mousedown I'll evaluate whether or not the mouse click occurs within the client area of the div. A click on the scrollbar will occur outside the client area of the div, but still within the offset area of the div. If the click occurs in this outer area, then event listeners for mousemove and mouseup will not be attached. |
|
| Back to top |
|
|
|
Welcome to DEVPPL.com
You are not logged in, which means that you can't post in the forums.
Click here to Register
If you are a current member here on DEVPPL, please login below:
|
|
|
|
