Javascript 悬停在边界上时如何触发

我想在用户悬停在边界上（或进入其附近）时做出反应

我得到了一个ERD/UML图的表，我想让用户有机会通过拖动表边框来调整这个表的大小。我正在使用jQuery和纯JS。我的表格是矩形的，其位置是已知的（x1，x2，y1，y2，宽度，高度，（x1 | y1）是左上角，（x2 | y2）是右下角）。每个表都有类“diagram”，所以我想触发“diagram”。悬停并检查鼠标位置，但这将是无效的

我主要是寻找理想，但简短的例子将是伟大的

代码更新：

---

据我所知，没有特殊的方法捕捉悬停在边界上的行为，因此您需要一些变通方法。第一种方法是创建环绕表的外部容器，使用一些像素填充，这样您将有一些边框，并检测外部容器和内部表上的悬停，如下所示：

<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>

$（函数（）{
var innerHover=false；
$（“.内部表格”）
.on（'mouseover'，function（）{
innerHover=true；
})
.on（'mouseout'，function（）{
innerHover=false；
});
//检查是否可以开始调整大小
$（'.external_wrapper'）。在（'click'，function（）上{
如果（！innerHover）{
//我们可以开始调整大小了！
}
});
});
...

---

另一种方法是沿所有四个表格边框创建附加的精简

div

s，并将其用作单击定位。这种方式是jQueryUI对话框小部件中的用户。它更加灵活，因为您不会被粘在容器边框上。

正如我所知，没有特殊的方法捕捉悬停在边框上的情况，因此您需要一些解决方法。第一种方法是创建环绕表的外部容器，使用一些像素填充，这样您将有一些边框，并检测外部容器和内部表上的悬停，如下所示：

<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>

$（函数（）{
var innerHover=false；
$（“.内部表格”）
.on（'mouseover'，function（）{
innerHover=true；
})
.on（'mouseout'，function（）{
innerHover=false；
});
//检查是否可以开始调整大小
$（'.external_wrapper'）。在（'click'，function（）上{
如果（！innerHover）{
//我们可以开始调整大小了！
}
});
});
...

---

另一种方法是沿所有四个表格边框创建附加的精简

div

s，并将其用作单击定位。这种方式是jQueryUI对话框小部件中的用户。它更加灵活，因为您不会粘在容器边框上。

将其包装在包装器中，并防止其子容器中发生事件。见下文：

var border=document.getElementById（“border”）；
border.onmouseover=函数（e）{
如果（e.target！==e.currentTarget）返回；
console.log（“边框悬停”）
}

#边框{
填充：4px；
背景：蓝色；
框大小：边框框；
光标：指针；
}
.盒子{
高度：100px；
宽度：100%；
背景：白色；
游标：默认值；
}

---

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

var border=document.getElementById（“border”）；
border.onmouseover=函数（e）{
如果（e.target！==e.currentTarget）返回；
console.log（“边框悬停”）
}

#边框{
填充：4px；
背景：蓝色；
框大小：边框框；
光标：指针；
}
.盒子{
高度：100px；
宽度：100%；
背景：白色；
游标：默认值；
}

Post您迄今为止尝试了什么Post您迄今为止尝试了什么如果我想在表列上执行此操作怎么办？@Fathy，将表内容分成两个

div

，一个外部和一个内部。将边框添加到外部，然后离开。如果需要更多帮助，请随意创建一个新问题并在此处添加链接：）如果我想在表列上执行此操作，该怎么办？@Fathy，将表内容包装为两个

div

，一个外部和一个内部。将边框添加到外部，然后离开。如果需要更多帮助，请随意创建新问题并在此处添加链接：）