如何仅在DIV边框区域触发鼠标移动事件

Question

大家好：

我正在尝试实现一个调整大小的功能（拖动DIV边框以调整其大小），但是很难找到触发事件。

假设我只想要单个DIV，而不是在内部设置边框区域元素，我想找到一种在该DIV元素上设置事件监听器的方法。我知道SVG可以通过将pointer-events设置为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>

谢谢

- Kuan

---

你可以检查鼠标坐标是否靠近边界。例如，如果您想水平调整大小并且您的 div 宽度为 100px，则可以检查 x 坐标是否在 99 和 101 之间。当然，您可以设置更好的阈值。 - icanc

@Kuan 请回复我发布的答案。 - Nikunj Madhogaria

Answer 1

边框不是元素，因此您无法绑定它们，但您可以使用offset()和outerWidth()并检查它们是否与鼠标位置相同。

- Oussama Elgoumri

Answer 2

我知道你只想要一个div，但也许你可以将一个放在另一个上面，并将下面的div用作边框。我制作了一个fiddle来说明这种行为，请查看console.log。

js fiddle

.outside {

    height:60px;

    width:60px;

    background:black;

    position:relative;

    z-index: 30;

}

.inside {

    background: yellow;

    height:50px;

    width:50px;

    position: absolute;

    top:12px;

    left: 13px;

    z-index:999;

}

和 html

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

和 js

$(".outside").on("mousemove", function () {
    console.log('im above outer element');
});

- cssBlaster21895

---

谢谢这个聪明的想法（我想我可能需要重新考虑放弃单DIV解决方案）。但我有点想知道是否有一种简单的方法来确定鼠标移动的方向？ - Kuan

尝试在元素上使用 jQuery position() 并与 mousemove 坐标进行比较，有关坐标的操作，请查看 http://api.jquery.com/mousemove/ 中的底部示例。 - cssBlaster21895

CSS规则应该是.outside。 - Gogol

Answer 3

我认为您需要将边框设置为父级div。

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

你可以在这里看到一个实际例子：

http://jsfiddle.net/s5gz9w73/1/

- Ekim

---

谢谢您的解决方案，但我想知道是否有一种简单的方法来确定鼠标移动的方向？ - Kuan

Answer 4

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

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

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++;
  }
}

使用 .mousemove(function(e){}); 处理程序，您可以检查 "e.clientX,e.clientY" 是否属于 border_coord[]，如下所示：

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

这是一个可用的演示。

- Nikunj Madhogaria

Answer 5

你不能使用CSS的resize: both;属性并使用jQuery检测#resize的大小变化吗？

这里有一个建议：

var h = 100;
var w = 100;
var ctr = 0;
$("#resize").mouseup(function(){
  if($(this).height() != h || $(this).width() != w){
    ctr++;
    $("pre").text("resized "+ctr);
    h = $(this).height();
    w = $(this).width();
  }
});

#resize {
  border: solid black 5px;
  width: 100px;
  height: 100px;
  display: block;
  resize: both;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resize"></div>
<pre>resized 0</pre>

虽然很多事情取决于你究竟想要实现什么。

- Nikunj Madhogaria

---

我真正想做的是制作一个总宽度固定但内部列可调整的表格。你能给我展示一下如何使用你的代码片段的例子吗？ - Kuan

然而，你的问题说的完全不同。不认为我发布的另一个解决方案应该根据问题描述被接受为答案？ :) 如果您认为是这样，请接受它。回到您的要求，您是否正在寻找类似于this的东西。如果是这种情况，我认为这个答案是有帮助的，值得一个+1。;) - Nikunj Madhogaria