为什么在别处点击鼠标时会触发onmousedown？

Question

我有一个带有onmousedown事件的div，但是当我点击远离div时，它会触发。 此屏幕截图显示了我刚刚点击并在广场上注册了mousedown的位置。我觉得我已经痴迷注释足以帮助...虽然我不小心写了“Picker”而不是“Switcher”......我已经确认“Picker”不在我的代码中。

如果您查看the page, active on my server，可以自行复制。它并不是一直发生，而是OFTEN。右边的div用每个事件填充一个字母，由于某种原因触发而不是取消，我用它来诊断问题。

我是新用户（sory - 一般是新用户，因此没有回答或询问任何内容）因此无法发布图像。
修改：这是图片：

#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意外地从此规则中选取256px的高度和宽度：

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

使它比它需要的大得多。因此，如果标记靠近颜色区域的底部，它将悬挂在colourSwitcherContainer的边缘并拾取点击。我认为您不打算将此规则与MapMark相匹配;你必须使它更具体，只需要拿起你想要它的主要部分。

Answer 2

它正在发生，因为＆＃34; colourSwitcherMapMark＆＃34; <div>，在词法上位于另一个<div>（＆＃34; colourSwitcherMatchBox＆＃34;）内，但绝对位于其外部。事件根据元素之间的词汇关系冒泡DOM，而不是屏幕位置。因此，当您单击此处时，即使 <div>没有事件处理程序，浏览器也会将其存储在DOM树中，以查看是否有任何父元素需要它。

您可以查看＆＃34;目标＆＃34;处理程序中事件对象的属性，以确保点击发生在您希望它发生的位置，但对我而言，其他<div>的位置无论如何都没有多大意义。

使用Firebug或Chrome开发人员工具，＆＃34; HTML＆＃34;或＆＃34;元素＆＃34;视图可以显示页面上的元素。

Answer 3

您需要使用event.stopPropagation（）停止点击“冒泡”dom。 IE处理事件的方式与其他人不同，因此您需要编写代码来处理它们。这是我的工具包中的一些代码 - 它已经有2年了，但我仍然使用它并且没有任何问题。

function myclick(e){
    if(e && e.stopPropagation) { 
        // Everyone but IE
        e.stopPropagation();
    } 
    else {  
        // IE
        e = window.event;
        e.cancelBubble = true;
    }
}

编辑 - 这是一个不错的最后手段，但正如Matt在评论中所述，您应该仔细检查您的应用程序的设计，看看是否有更好的方法来构建您的div，以便您不必沉溺于浏览器的事件处理内部。

Answer 4

如果外部点击命中事件处理程序，那么该区域就是您将事件处理程序挂钩的元素的一部分。

你在div上有这些事件处理程序。其他区域似乎很清楚，但它们都在div中。

您应该能够看到他们使用FireBug覆盖哪个区域，例如

解决方案是将div限制为特定的宽度和高度。

Answer 5

你的#colourSwitcherMapMark选择器不够强大，所以div实际上是256x256而不是15x15。将其更改为div#colourSwitcherMapMark。