ボーダー上でホバーをトリガーする方法

Question

ユーザーがボーダー上（またはその近く）に移動した場合に反応したい。

私はERD/UML図用の表を手に入れました。ユーザーに表の境界線をドラッグしてこの表のサイズを変更できるようにしたいと考えています。私はjQueryとpure JSで作業しています。テーブルは長方形で、その位置はわかっています（x1、x2、y1、y2、width、height、（x1 | y1）は左上、（x2 | y2）は右下です）。すべてのテーブルにはクラス "ダイアグラム"がありますので、 "ダイアグラム" .hoverをトリガしてマウスの位置を確認することを考えましたが、これは非効率的です。

私は主に理想を探していますが、短い例が素晴らしいでしょう。

コードアップデート：私が知っているように 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> 

他の方法4つのテーブルのすべての罫線に沿って細い追加の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>

あなたがこれまでに試してみました何