Question

有一个名为resize的新CSS属性，因此div也可以调整大小。但是如何附加事件监听器？因为.onresize仅适用于窗口对象

编辑：

我不想使用JQuery。这不是一个重复的问题。我发现这个问题只有JQuery解决方案，这就是我问这个问题的原因。

Answer 1

我以这种方式解决了这个问题。似乎至少可以在Firefox中正常工作。当您将光标从要调整大小的元素的右下角的调整大小“抓取器”上移开时，就会触发。

<DOCTYPE=html>
<html>

<script>
function functionname()
{
//replace this line with the script you want executed
}
</script>

<style>
#idname {resize:both;}
</style>

<body>
<div id="idname" onmouseout="functionname();"></div>
</body>

</html>

Answer 2

这是解决问题的另一种方法。添加您自己的“句柄”（可以捕获mousedown mouseup事件的较小元素。不确定是否有帮助。

building interactive elements with html and javascript resizing

另一个局部选项：此功能尚不常见，但可在Chrome浏览器中使用：resizeObserver

stackoverflow question

Answer 3

这是今天DOM中的一个真正问题。现代浏览器支持可用于检测调整大小的下溢/溢出事件，IE支持非标准调整大小事件。问题是，IE11删除了那个非标准的事件并且没有提供任何替代方案，所以你需要在hacks hacks上使用hacks。可以在这里找到工作黑客：

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

如何调用div resize上的函数？

3 个答案: