如何在邊框上懸停時觸發

Question

我想在用戶懸停在邊界（或其附近）時作出反應。

我得到了ERD/UML圖表，我想讓用戶有機會通過拖動表格邊框來調整此表的大小。我正在使用jQuery和純JS。我的表格是矩形，它的位置是已知的（x1，x2，y1，y2，寬度，高度，（x1 | y1）是左上角，（x2 | y2）是右下角）。每張桌子都有「圖表」類，所以我想過觸發「圖表」，並檢查鼠標的位置，但這不是高性能的。

我主要是在尋找idears，但簡短的例子會很棒。

代碼更新： http://codepad.org/3xr8H39m

Answer 1

據我所知，有趕懸停在邊框沒有什麼特別的方法，所以你需要一些解決方法。第一種方式是創建圍着桌子包裹，具有一定的像素填充外部容器，那麼你將有一些邊界，並檢測懸停在既有外部容器和內部表，就像這裏：

<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對話框小部件中的用戶。它非常靈活，因爲您不會被粘在容器邊界上。

Answer 2

將其包裝在包裝中，並防止其子女發生事件。請看下圖：

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>