473,701 Members | 2,848 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Why do mouseup events sometimes fire if the mouse is not released?

In the following script, a control displays (black box) in each table
cell once you mouse over the cell. Mouse down on the control to change
the mode of the table. Drag the mouse over cells in the same column
then mouseup anywhere in a cell. The mouseup event sometimres fires
before the selection of table cells by dragging is complete. It's
important that I stop these "false" mouseup's from firing or
distinguish them from when I let go of the mouse button.

<html>
<head>
<title></title>
<style>
#calendar {
position:relati ve;
top:10;
left:10;
background-color:white;
width:700;
}
.calendarHeader {
background-color:lightgree n;
text-align:center;
font-family:sans-serif;
width:347;
}
.calendarRow {
height:30;
}
#book {
position:absolu te;
width:400;
height:200;
color:grey;
background-color:lightyell ow;
border:3px grey solid;
font-weight:bold;
font-family:sans-serif;
visibility:hidd en;
}
#output {
position:relati ve;
top:30;
left:10
}
#clear {
position:relati ve;
top:40;
left:10;
width:80;
background-color:lightgrey ;
border:2px black solid;
color:black;
text-align:center;
font-weight:bold;
font-family:sans-serif;
}
</style>
</head>
<body>
<table id='calendar' border='1' cellpadding='0' cellspacing='0' >
<tr>
<td class="calendar Header">Mark</td>
<td class="calendar Header">Jennie</td>
</tr>
<tr class='calendar Row'>
<td id='1|Mark'></td>
<td id='1|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='2|Mark'></td>
<td id='2|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='3|Mark'></td>
<td id='3|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='4|Mark'></td>
<td id='4|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='5|Mark'></td>
<td id='5|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='6|Mark'></td>
<td id='6|Jennie'></td>
</tr>
<tr class='calendar Row'>
<td id='7|Mark'></td>
<td id='7|Jennie'></td>
</tr>
</table>

<div id="output"><te xtarea cols=50 rows=10></textarea></div>
<div id="clear"
onclick="docume nt.getElementBy Id('output').fi rstChild.value =
'';">CLEAR</div>
<div id="book" onclick="this.s tyle.visibility = 'hidden';">&nbs p;</
div>

<script>
var calendar = document.getEle mentById('calen dar'),
slots = calendar.getEle mentsByTagName( 'td'),
rows = calendar.getEle mentsByTagName( 'tr'),
/*debug*/ output = document.getEle mentById('outpu t').firstChild;
/*debug*/ output.value = '';

var apt = document.getEle mentById('book' );
apt.appendChild (document.creat eTextNode(''));

function addWebControl(e l) {
var wc = document.create Element('div');
wc.setAttribute ('style',
'position:relat ive; ' +
'background-color:lightgrey ;' +
'border-width:1px;' +
'border-color:black; ' +
'border-style:solid; ' +
'margin:0px; ' +
'padding:0px; ' +
'visibility:hid den; ' +
'top:0; ' +
'left:312; ' +
'height:10; ' +
'width:30;');
el.appendChild( wc);
}

var firstSlotSelect ed = null,
firstInitialSta te,
drag = false,
columnSelected,
firstRowSelecte d,
lastRowSelected ;

function mousedownHandle r(e) { // Handler only on web access control
button inside slot.
var target = getEventTarget( e);

drag = true;
firstInitialSta te = target.style.ba ckgroundColor;
firstSlotSelect ed = target.parentNo de;
columnSelected = firstSlotSelect ed.cellIndex;
firstRowSelecte d = firstSlotSelect ed.parentNode.r owIndex;

var wcs, bgC = (firstInitialSt ate == 'lightgrey')?
'lightgrey':'wh ite';
target.parentNo de.style.backgr oundColor = bgC;
(wcs = target.parentNo de.firstChild.s tyle).backgroun dColor =
(firstInitialSt ate == 'lightgrey')? 'white':'lightg rey';
wcs.visibility = 'hidden';

return false;
}

var highlightedSlot = null;

function mouseoverHandle r(e) {
var target = getEventTarget( e);
if (target.nodeNam e != 'TD') return; // Mouse did not move into
table cell.

/** Find the element the mouse moved from **/

var relTarget = (!e)? null:(e.related Target)?
e.relatedTarget :e.fromElement; // Get the element the mouse comes
from.
if (!relTarget) return;

while (relTarget != target && relTarget.nodeN ame != 'BODY') { // Move
through ancestors until target or BODY found.
relTarget = relTarget.paren tNode;
}

if (relTarget == target) return; // Mouse moves from a child
(related target) over the target element.

/** Mouse actually entered TD. Handle event. **/

if (!drag) {
if (highlightedSlo t) { // Corrects for mouseout failing to
register with rapid cursor movement.
highlightedSlot .style.backgrou ndColor =
(highlightedSlo t.firstChild.st yle.backgroundC olor == 'lightgrey')?
'white':'lightg rey';
highlightedSlot .firstChild.sty le.visibility = "hidden";
}
highlightedSlot = target;
target.style.ba ckgroundColor =
(target.firstCh ild.style.backg roundColor == 'lightgrey')?
'lightyellow':' lightgrey';
target.firstChi ld.style.visibi lity = "visible";
}
else {
if (target.cellInd ex == columnSelected) {
lastRowSelected = target.parentNo de.rowIndex;
var wcs, bgC = (firstInitialSt ate == 'lightgrey')?
'lightgrey':'wh ite';
target.style.ba ckgroundColor = bgC;
(wcs = target.firstChi ld.style).backg roundColor =
(firstInitialSt ate == 'lightgrey')? 'white':'lightg rey';
wcs.visibility = 'hidden';
}
else {
firstSlotSelect ed = null;
firstInitialSta te = null;
firstRowSelecte d = null;
lastRowSelected = null;
columnSelected = null;
}
}
}

function mouseoutHandler (e) {
var target = getEventTarget( e);
if (target.nodeNam e != 'TD') return; // Mouse did not move out of
table cell.

/** Find the element the mouse moved to. **/

var relTarget = (!e)? null:(e.related Target)?
e.relatedTarget :e.toElement; // Get the element the mouse goes to.
if (!relTarget) return;

while (relTarget != target && relTarget.nodeN ame != 'BODY') { // Move
through ancestors until target or BODY found.
relTarget = relTarget.paren tNode;
}

if (relTarget == target) return; // Mouse moves to a child (related
target) out of the target element.

/** Mouse actually left TD. Handle event. **/

if (drag) {
target.style.ba ckgroundColor =
(target.firstCh ild.style.backg roundColor == 'lightgrey')?
'white':'lightg rey';
}
else {
highlightedSlot = null;
target.style.ba ckgroundColor =
(target.firstCh ild.style.backg roundColor == 'lightgrey')?
'white':'lightg rey';
target.firstChi ld.style.visibi lity = "hidden";
}
}

function mouseupHandler( e) {
var target = getEventTarget( e);
if (target.nodeNam e == 'DIV') target = target.parentNo de;

/*debug*/ output.value += 'mouseUp\t';

if (drag) {
firstSlotSelect ed = null;
firstInitialSta te = null;
firstRowSelecte d = null;
lastRowSelected = null;
columnSelected = null;
drag = false;
}
else if (target.style.b ackgroundColor != 'lightgrey' &&
getEventCoordin ateX(e) - getElementCoord inateX(target) < 310) {
apt.firstChild. replaceData(1,1 0,target.id);
apt.style.left = e.clientX + window.pageXOff set;
apt.style.top = e.clientY + window.pageYOff set;
apt.style.visib ility = 'visible';
}
}

function getElementCoord inateX(el) {
var x = 0;
while (el) {
x += el.offsetLeft;
el = el.offsetParent ;
}
return x;
}

function getEventCoordin ateX(e) {
return (typeof e.offsetX != 'undefined')? e.offsetX:e.cli entX +
window.pageXOff set;
}

function addEvent(el, evtType, listener, captures) {
if (el.addEventLis tener) {
el.addEventList ener(evtType, listener, captures);
return true;
}
else if (el.attachEvent ) {
return el.attachEvent( 'on' + evtType, listener);
}
else {
el['on' + evtType] = listener;
}
}

function getEventTarget( e) {
return (window.event)? window.event.sr cElement:(e)? e.target:null;
}

for (var i=0; i < slots.length; i++) {
if (slots[i].id.length 0) {
addWebControl(s lots[i]); // Add web control DIV element as second
child;
addEvent(slots[i], 'mouseout', mouseoutHandler , false);
addEvent(slots[i], 'mouseover', mouseoverHandle r, false);
addEvent(slots[i], 'mouseup', mouseupHandler, false);
addEvent(slots[i].firstChild, 'mousedown', mousedownHandle r, false);
}
}
</script>
</body>
</html>
Jun 27 '08 #1
2 3134
ma*********@gma il.com wrote:
In the following script, a control displays (black box) in each table
cell once you mouse over the cell. Mouse down on the control to change
the mode of the table. Drag the mouse over cells in the same column
then mouseup anywhere in a cell. The mouseup event sometimres fires
before the selection of table cells by dragging is complete. It's
important that I stop these "false" mouseup's from firing or
distinguish them from when I let go of the mouse button.
You might be suffering from key bounce. It happens with switches all the
time. You push a button and think you're making contact once and keeping
the button down you'd expect no mouse up. But, the nature of switches is
that you often get a bounce like a dropped ball doesn't just hit the
ground and stay there, it bounces a few times before settling. Same deal
with switches. I had to build debounce logic into a keyboard driver I
wrote once, although that was in assembler and had a lot more control
over timing than JavaScript would have. The basic principle is that you
ignore up events for a certain amount of time because you know they're
just the bounces. Then after that "blocking" time (we're talking a very
short time here), you look at the state, wait a bit more, check it
again, and then you can be sure of the final state and re-enable
(unblock) the up events. If you see the state is up, then you can
generate an up event (or call your up event handler) because you've
detected a genuine up event.

Now whether all this is coming into play in your situation, and whether
even if it is, you have the level of control that would be needed is a
different story. It's possible of course that Windows already takes care
of such issues. I'm throwing it out there though, and it was fun to
reminisce about the old days of Assembler to myself :-)
Jun 27 '08 #2
On May 6, 11:51 am, Stevo <n...@mail.inva lidwrote:
markszla...@gma il.com wrote:
In the following script, a control displays (black box) in each table
cell once you mouse over the cell. Mouse down on the control to change
the mode of the table. Drag the mouse over cells in the same column
then mouseup anywhere in a cell. The mouseup event sometimres fires
before the selection of table cells by dragging is complete. It's
important that I stop these "false" mouseup's from firing or
distinguish them from when I let go of the mouse button.

You might be suffering from key bounce. It happens with switches all the
time. You push a button and think you're making contact once and keeping
the button down you'd expect no mouse up. But, the nature of switches is
that you often get a bounce like a dropped ball doesn't just hit the
ground and stay there, it bounces a few times before settling. Same deal
with switches. I had to build debounce logic into a keyboard driver I
wrote once, although that was in assembler and had a lot more control
over timing than JavaScript would have. The basic principle is that you
ignore up events for a certain amount of time because you know they're
just the bounces. Then after that "blocking" time (we're talking a very
short time here), you look at the state, wait a bit more, check it
again, and then you can be sure of the final state and re-enable
(unblock) the up events. If you see the state is up, then you can
generate an up event (or call your up event handler) because you've
detected a genuine up event.

Now whether all this is coming into play in your situation, and whether
even if it is, you have the level of control that would be needed is a
different story. It's possible of course that Windows already takes care
of such issues. I'm throwing it out there though, and it was fun to
reminisce about the old days of Assembler to myself :-)
OK thanks, that is something to look at. So I take it that you don't
see an obvious problem with the code.

Jun 27 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
6225
by: John Champaign | last post by:
Hi all, I'm working on an educational applet for a child with special needs. He's got a bit of a trick to make my life more difficult... To interact with the applet he needs to click on buttons, which is fine most of the time (he comes from a Mac environment, so I accept mouse clicks from the right or left button when he's working on the PC). But every once in a while, he'll press and hold the right mouse button, move onto a JButton,...
0
4649
by: Mark Schwarz | last post by:
Hello everyone, I've a problem using SetCapture and MouseUp events. I've done an app that is doing SetCapture(Handle) on a buttonclick event and have a mouseup event that shows a MessageBox and then call Releasecaptue and Setcapture(Handle):note that Handle is the same called from Button and Mouseup event. I'd expect that my app need only first time to press the button because other time setcapture is called from mouseup event.This is...
4
4353
by: Colin McGuire | last post by:
Hi again, thanks everyone for your previous help. But having resolved past problems, I'm moving on to new problems :( This one is a simple winforms application with two buttons, named Button1 and Button2, on it (code below). When I press the mouse button over Button2, and don't release it, in the IDE output window it prints "Button2_MouseDown" only. If I release the mouse button over the button, over the form, or even over ANY other...
1
2787
by: Alan | last post by:
i have a form with a label on it Private Sub Label1_mousedown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Label1.MouseDown ' do stuff End Sub Private Sub Label1_mouseup(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Label1.MouseUp
2
4743
by: dave.wayne | last post by:
In a web page I have a div tag that has a onlick event registered through the event listener. However, that same div tag also has a onmousedown - start a drag and drop script The problem I am having is that once the drag and drop is complete, the mouse button is released and the onclick event is firing. I've tried returning false from the function dealing with the mouse up and cancelling the event with if (e.stopPropagation)...
0
1356
by: MSDN | last post by:
Hello, On the client side in JavaScript my onMouseUp event is NOT firing?? The onMouseDown and onMouseUp events fire if there is no other event in between. This is what I mean: The onMouseUp event does NOT fire after the onMouseDown followed by moving the mouse then releasing it.
3
3586
by: Techsatish | last post by:
how to make a mouseup event called only once during a double click event? here double click is made on a tree node in a tree control. I have the code inside mouseup event....in runtime the mouseup is called twice for the mouse double click over the selected tree node. I want mouseup event to be called onece Any ideas?
12
4024
by: Tom Bean | last post by:
I am trying to display a ContextMenuStrip when a user right-clicks on an item in a ListView and have encountered a something that seems strange to me. When the ListView is initially populated, no items are selected. When the first item is selected by clicking either the left or right button, the SelectedIndexChanged event fires but not the MouseUp event. After the first item is selected and another item clicked on, both the...
3
2825
by: rory.groves | last post by:
I have an C# .NET 2.0 application which runs fine on XP, but on Vista (Home Basic), the MouseUp event does not fire until i move the mouse over another control/button in the application. The same thing happens for the MouseLeave events. They do not fire until the mouse enters a different control. This would seem to be a huge problem, but i did not see much online about it. Does anyone know what could be causing this?
0
8737
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8936
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7827
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6573
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4411
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4665
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3104
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2399
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2036
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.