Javascript 如何仅在DIV的边界区域触发鼠标移动

全部：

我试图实现一个调整大小的函数（拖动DIV的边框来调整大小），但是很难找到触发器事件

假设我只需要一个DIV，而不是在其中设置Border-area元素，我想找到一种方法在该DIV元素上设置事件监听器，我知道SVG可以通过将指针事件设置为stroke来做到这一点，但我不知道如何在HTML元素上做到这一点

<style>
    #resize {
        border:solid black 5px;
        width:100px;
        height:100px;
        display:block;
/* I do not know what to set here to make only border can respond to mouse action */
    }
</style>

<div id="resize"></div>

<script>

    $("#resize").on("mousemove", function(){
        if(isMouseDown) {
            // drag to resize logic here
        }
    })

</script>

#调整大小{
边框：纯黑5px；
宽度：100px；
高度：100px；
显示：块；
/*我不知道在这里设置什么，使得只有边框可以响应鼠标的动作*/
}
$（“#resize”）。在（“mousemove”，function（）上{
如果（isMouseDown）{
//拖动可在此处调整逻辑大小
}
})

---

谢谢，边框不是元素，所以您不能绑定到它们，但是您可以使用offset（）和outerWidth（）并检查它们是否与鼠标位置相同。

我知道您只需要一个div，但也许您可以将一个div放置在另一个div之上，并使用底部div作为边框。我制作了小提琴来说明这种行为，请查看console.log

和html

<div class="outside"></div>
<div class="inside"></div>

---

我想你得把边境变成一个家长区

<div id="resize">
    <div id="innerpart">
    </div>
</div>

您可以在此处看到一个工作示例：

---

在一个棘手的解决方案之后找到了一个解决方案-

使用简单的几何计算收集边界坐标

Set of Border Coordinates = Set of (Border + Content) Coordinates - Set of Content Coordinates

可以按如下方式创建边界坐标数组：

var y_offset = $("#resize").offset().top;
var x_offset = $("#resize").offset().left;

var y_outer = y_offset + $("#resize").height() + (2 * 5) - 1;
var x_outer = x_offset + $("#resize").width() + (2 * 5) - 1;

var i, j, pos, outer_size;
var outer_div_coord = [];
pos = 0;

for(i = x_offset; i <= x_outer; i++){
  for(j = y_offset; j <= y_outer; j++){
    outer_div_coord[pos++] = i + "," + j;
  }
}
outer_size = pos;

var inner_div_coord = [];
pos = 0;

for(i = x_offset + 5; i <= x_outer - 5; i++){
  for(j = y_offset + 5; j <= y_outer - 5; j++){
    inner_div_coord[pos++] = i + "," + j;
  }
}

var border_coord = [];
pos = 0;

for(i = 0; i < outer_size; i++){
  if(inner_div_coord.indexOf(outer_div_coord[i]) == -1){
    border_coord[pos] = outer_div_coord[i];
    pos++;
  }
}

$("#resize").mousemove(function(e){
  cursor_coord = e.clientX + "," + e.clientY;
  if(border_coord.indexOf(cursor_coord) > -1)
    console.log("on border");
});

---

这里有一个解决方案。

你不能使用css

调整大小：两者都可以

属性并使用jQuery检测

#resize

的大小变化

这里有一个建议：

var h=100；
var w=100；
var-ctr=0；
$（“#调整大小”）.mouseup（函数（）{
如果（$（此）.height（）！=h | |$（此）.width（）！=w）{
ctr++；
$（“预”）文本（“调整大小”+ctr）；
h=$（this）.height（）；
w=$（this）.width（）；
}
});
#调整大小{
边框：纯黑5px；
宽度：100px；
高度：100px；
显示：块；
调整大小：两者；
溢出：自动；
}

调整大小0
您可以检查鼠标坐标是否靠近边框。例如，如果要水平调整大小，且
div
的宽度为
100px
，则可以检查
x
坐标是否在
99
和
101
之间。当然，您可以设置更好的阈值。@Kuan请回复我发布的答案。感谢这个聪明的想法（我想我可能需要重新考虑放弃单分区解决方案）。但是我想知道是否有一种简单的方法来确定我移动鼠标的方向？尝试在元素上使用jquery position（）并与mousemove坐标进行比较，以便使用坐标检查-底部示例CSS规则应该是
。外部
感谢您的解决方案，但我想知道是否有一种简单的方法来确定我移动鼠标的方向？我真正想做的是制作一个总宽度固定但内部列可调的桌子。你能给我看一个如何使用你的代码片段的例子吗？但是你的问题说的完全不同。根据问题描述，不认为我发布的其他解决方案应被接受为答案吗？：）如果你这样认为，请接受它。回到您的需求，您是否正在寻找类似的产品。如果是这样的话，我认为这个答案很有帮助，应该得+1分
var y_offset = $("#resize").offset().top;
var x_offset = $("#resize").offset().left;

var y_outer = y_offset + $("#resize").height() + (2 * 5) - 1;
var x_outer = x_offset + $("#resize").width() + (2 * 5) - 1;

var i, j, pos, outer_size;
var outer_div_coord = [];
pos = 0;

for(i = x_offset; i <= x_outer; i++){
  for(j = y_offset; j <= y_outer; j++){
    outer_div_coord[pos++] = i + "," + j;
  }
}
outer_size = pos;

var inner_div_coord = [];
pos = 0;

for(i = x_offset + 5; i <= x_outer - 5; i++){
  for(j = y_offset + 5; j <= y_outer - 5; j++){
    inner_div_coord[pos++] = i + "," + j;
  }
}

var border_coord = [];
pos = 0;

for(i = 0; i < outer_size; i++){
  if(inner_div_coord.indexOf(outer_div_coord[i]) == -1){
    border_coord[pos] = outer_div_coord[i];
    pos++;
  }
}

$("#resize").mousemove(function(e){
  cursor_coord = e.clientX + "," + e.clientY;
  if(border_coord.indexOf(cursor_coord) > -1)
    console.log("on border");
});