Cancelling document events

If I have some document wide event, like document.onmousedown, handled by a particular function, what is the best way to override/cancel that function it certain cases?

For example, I have document.onmousedown = somefunction().  Now, somefunction() is triggered whenever I click anywhere on the page - which is what I want.  BUT - there are also certain objects on the page which have there own onmousedown event handlers.  When I click these objects, both the object onmousedown event and the document onmousedown event is triggered.  What is the best way to cancel the document onmousedown event when I click a certain object?
chsalviaAsked:
Who is Participating?
 
NightfalconCommented:
Hi chsalvia,

Please ignore my previous comment, I misread your problem.

I can't seem to be able to find a solution, but I did find something that should work, I just can't get it ot work.
The theory is to set cancel the onMouseDown-event from going through the document using event.cancelbubble=true.
But it doens't seem to work. Maybe you can find a way ...

<html>
<head>
</head>
<body onMouseDown="alert('document');">
<input type="text" id="textbox1" onMouseDown="window.event.cancelbubble=true;alert('txt1');">
<input type="text" id="textbox2" onMouseDown="alert('txt2');">
</body>
</html>

Night
0
 
xlt77Commented:
Try this

<html>
<head>
<script>
document.onmousedown=documentmousedown;
function documentmousedown(){
      alert('Document');
}
function inputmousedown()
{
      document.onmousedown='undefined';
      alert('Input Click');
}
</script>
</head>
<body>
Test Line 1 <br>
Test Line 2 <br>
<input name=Test size=20 onmousedown='inputmousedown();' onblur='document.onmousedown=documentmousedown;'>
</body>
</html>
0
 
NightfalconCommented:
Hi chsalvia,

In the next example, the same onMouseOver-event is raised by two inputfields, but the event is handled different.

<html>
<head>
<script>
function dosomething(id){
     if (id == "textbox1"){
          alert("do nothing");
     }else{
          alert("do something");
     }
}
</script>
</head>
<body>
<input type="text" id="textbox1" onMouseOver="dosomething('textbox1');">
<input type="text" id="textbox2" onMouseOver="dosomething('textbox2');">
</body>
</html>

Night
0
 
dakydCommented:
Nightfalcon, you almost had it right (either you had a small typo, or you were testing in a non-IE browser, which doesn't use window.event).  IE does use event.cancelBubble, but FF, for example, uses stopPropagation().  See the script below, it uses alerts to show you which function/event handler is being called.

For an explanation of the bubbling/capturing of events, check out: http://www.quirksmode.org/js/events_order.html.  If you've got the time, though, I'd recommend reading through the whole section on events, starting here: http://www.quirksmode.org/js/introevents.html.

Regardless, hope it helps.

<html>
<head>
<script type="text/javascript">
document.onmousedown = function() {
  alert("global mousedown handler");
};

function localMousedownHandler(e)
{
  alert("local mousedown handler");
  if (window.event)
    window.event.cancelBubble = true;
  else
    e.stopPropagation();
  return false;
}
</script>
<style type="text/css">
.local {
  height: 200px;
  border: 1px solid black;
  background-color: #bbd;
}


</style>
</head>

<body>
<div class="local" onmousedown="localMousedownHandler(event);">this div over-rides global mousedown</div>

<div>This is plain old text, it uses the document's global mousedown handler.</div>
</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.