Question

如果用户悬停在边界（或靠近边界），我想作出反应。

我有一个ERD / UML图表，我希望通过拖动表格边框让用户有机会调整此表格的大小。我正在使用jQuery和纯JS。我的表是矩形，其位置是已知的（x1，x2，y1，y2，宽度，高度，（x1 | y1）是左上角，（x2 | y2）是右下角）。每个表都有类“图”，所以我考虑触发。“图”.hover并检查鼠标位置，但这不符合要求。

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

代码更新： 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>

Answer 2

据我所知，没有特殊的方法来捕捉悬停在边界上，所以你需要一些解决方法。第一种方法是创建围绕表格的外部容器，使用一些像素填充，这样你就会有一些边框，并检测在外部容器和内部表上的悬停，如下所示：

<script type="text/javascript">
    $(function() {
        var innerHover = false;
        $('.inner_table')
            .on('mouseover', function() {
                innerHover = true;
            })
            .on('mouseout', function() {
                innerHover = false;
            });
       // check if we can start resizing
       $('.external_wrapper').on('click', function() {
           if (!innerHover) {
               // we can start resizing!
           }
       });
   });
</script>

<div class="external_wrapper" style="padding: 3px;">
    <table class="inner_table">
    ...
    </table>
</div>

另一种方法是沿所有四个表格边框创建精简的附加div，并将它们用作点击锚点。这种方式是jQueryUI对话框小部件中的用户。它更灵活，因为你不会粘在容器边界上。

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

2 个答案: