Question

我正在使用CSS3 resize属性创建一个可垂直滚动的div：

.mydiv {
  resize: vertical
  overflow: auto;
}

Chrome会在div的右下角放置一些对角线阴影，我现在可以使用它来调整它的大小。

有没有办法在JavaScript中检测调整大小？我尝试在div的属性上使用DOM4 Mutation Observer，但它不会触发任何东西。我可以在div上使用鼠标事件，但它是hacky（mousedown不会触发，所以我必须听所有mousemove并检测它是否在那个角落附近。）

Answer 1

使用Chrome textarea句柄无法将事件附加到调整大小。阅读本文： jQuery : Chrome textareas and resize event

我尝试使用DOMSubtreeModified，但它不会修改DOM，因此不起作用。

- UPDATE - 如果你想使用jQuery UI，那么它是可能的。请参阅： http://jsfiddle.net/kJNsB/1/

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized! Height:"+$(this).height()+" /// Width:"+$(this).width()+"</pre>");
    }
});

- 更新 - 这家伙已经弄明白了！的 http://benalman.com/code/projects/jquery-resize/examples/resize/

Answer 2

你能试试吗，

HTML：

<textarea onresize="Resizing()"></textarea>

使用Javascript：

function Resizing(){
   console.log("Resizing..");
}

Answer 3

现在，只有窗口对象可以具有调整大小的事件处理程序。但是您可以在元素上使用getBoundingClientRect（）。

https://developer.mozilla.org/en-US/docs/Web/Events/resize

在某些早期的浏览器中，可以在任何HTML元素上注册调整大小事件处理程序。仍然可以设置onresize属性或使用addEventListener（）在任何元素上设置处理程序。但是，调整大小事件仅在窗口对象上触发（即由document.defaultView返回）。只有在window对象上注册的处理程序将接收调整大小事件。

有一项建议，允许在调整大小更改时通知所有元素。

是否有一个JavaScript事件来检测何时使用CSS3 resize属性更改div的大小？

3 个答案: