javascript - 如何在悬停在边框上时触发

Question

如果用户将鼠标悬停在边界上(或其附近)，我想使用react。

我有一个 ERD/UML 图的表格，我想让用户有机会通过拖动表格边框来调整该表格的大小。我正在使用 jQuery 和纯 JS。我的表格是矩形，它的位置是已知的(x1、x2、y1、y2、宽度、高度，(x1 | y1) 是左上角，(x2 | y2) 是右下角)。每个表都有类 "diagram"，所以我考虑触发 "diagram"。悬停并检查鼠标位置，但这将是非性能的。

我主要是在寻找想法，但是简短的例子会很棒。

代码更新: http://codepad.org/3xr8H39m

Answer 1

将其包裹在包装器中，防止事件在其子项中发生。见下文:

var border = document.getElementById("border");

border.onmouseover = function(e) {
  if(e.target !== e.currentTarget) return;
  console.log("border-hover")
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>