Question

I have a div with an onmousedown event, but it is triggering when I click far outside of the div.
This screenshot shows where I had just clicked and registered a mousedown on the square. I think I have it obsessively annotated enough to be helpful… though I accidentally wrote “Picker” instead of “Switcher”… I have confirmed that “Picker” is no where in my code.

If you look on the page, active on my server you can duplicate this yourself. It doesn’t happen all the time, but OFTEN. The div on the right fills with one letter per event that is triggered and not cancelled for one reason or another, which I used to diagnose the problem.

I’m a new user (sory – new in general, so haven’t answered or asked anything) so can’t post images.
Edit: Here’s the image:

#colourSwitcherMapBox {
  position: absolute;
  left: 5px;
  top: 5px;
  height: 256px;
  width: 256px;
  display: block;
  background-color: orange;
}
#colourSwitcherMapMark {
  position: absolute;
  height: 15px;
  width: 15px;
  top: -8px;
  left: 248px;
  z-index: 3;
  display: block;
}
#colourSwitcherMapBox div {
  position: absolute;
  height: 256px;
  width: 256px;
  top: 0;
  left: 0;
}

<div id="colourSwitcherContainer" class="colourSwitcherStuff" onmousedown="colourSwitcherDrag(event);">
  Colour Switcher:<input type="checkbox" onclick="toggleColourSwitcher(this.checked);" />
  <div id="mainColourSwitcher">
    <div id="colourSwitcherMapBox" onmousedown="colourSwitcherDragMap(event);">
      <div id="colourSwitcherMapMark"><img src="imagesCP/mapIndicator.png" alt="" /></div>
      <div id="colourSwitcherMaxB"><img src="imagesCP/map-blue-max.png" alt="" /></div>
      ... lots more divs identical to the last line other than image and  ...
    </div>
   ... other stuff (colourSwitcherBarBox and colourSwitcherPickInfo) ...
  </div>
</div>

function colourSwitcherDragMap (event) {
  if (!event) {var event = window.event;}
  if (event.preventDefault) {event.preventDefault();} else { event.returnValue = false; }
  document.body.onmousemove = colourSwitcherChangeBar;
  document.body.onmouseup = colourSwitcherStopDragging;
  document.getElementById("randomblob").innerHTML += "M ";
  colourSwitcherChangeBar (event);
}

Answer 1

colourSwitcherMapMark accidentally picks up a height and width of 256px from this rule:

#colourSwitcherMapBox div {
    height: 256px;
    ...

making it much bigger than it needs to be. So if the marker is nearer the bottom of the colour area, it will hang over the edge of the colourSwitcherContainer and pick up clicks. I don’t think you intended this rule to match the MapMark; you will have to make it more specific, to only pick up the main div you want it to.