是否有JavaScript事件可以使用CSS3调整大小属性来检测div的大小何时发生更改？

Question

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

.mydiv {
  resize: vertical
  overflow: auto;
}

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

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

Answer 1

似乎不可能使用Chrome textarea手柄将事件附加到调整大小。请阅读：

我尝试使用DOMSubtreeModified，但它没有修改DOM，所以不起作用。

--UPDATE--如果你想使用jQuery UI，这是可能的。看看这个：

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

--UPDATE--这家伙已经想通了！

Answer 2

你能试试这个吗，

HTML：

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

Javascript：

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

Answer 3

现在只有window对象可以有一个resize事件处理程序。但是您可以在元素上使用getBoundingClientRect()。

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

在一些较早的浏览器中，可以在任何

元素上注册resize事件处理程序。仍然可以设置onresize属性或使用addEventListener()在任何元素上设置处理程序。但是，调整大小事件仅在窗口对象上触发(即由document.defaultView返回)。只有在窗口对象上注册的处理程序才会接收调整大小事件。

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