我有下面的样本html,有一个DIV有100%的宽度。它包含了一些元素。在执行窗口调整大小时,内部元素可能会被重新定位,div的尺寸可能会改变。我在问是否有可能挂钩div的维度变化事件?以及如何做到这一点?我目前绑定回调函数到目标DIV上的jQuery调整大小事件,但是,没有输出控制台日志,如下所示:

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

当前回答

纯Javascript解决方案,但只有当元素用css resize按钮调整大小时才能工作:

使用offsetWidth和offsetHeight存储元素大小; 在这个元素上添加一个onclick事件监听器; 当触发时,比较当前的offsetWidth和offsetHeight与存储的值,如果不同,做你想做的,并更新这些值。

其他回答

看看这个http://benalman.com/code/projects/jquery-resize/examples/resize/

它有很多例子。尝试调整窗口大小,看看容器元素中的元素是如何调整的。

用js的例子来解释如何让它工作。 看看这小提琴http://jsfiddle.net/sgsqJ/4/

在这个resize()事件中,它被绑定到具有类“test”的元素以及窗口对象 在窗口对象$('.test')的resize回调中调用.resize()。

e.g.

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

使用disconnect删除事件监听器:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "context", "output"]

  connect() {
    this.inputObserver = new ResizeObserver(() => { this.resizeInput() })
    this.inputObserver.observe(this.inputTarget)
  }

  disconnect() {
    this.inputObserver.disconnect(this.inputTarget)
  }

  resizeInput() {
    const height = this.inputTarget.offsetHeight

    this.contextTarget.style.height = `${height}px`
    this.outputTarget.style.height = `${height}px`
  }
}

使用Clay.js (https://github.com/zzarcon/clay),检测元素大小的变化非常简单:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

我的jQuery插件在所有元素上启用了“调整大小”事件,而不仅仅是窗口。

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
}); 

使用Bharat Patil回答,在你的绑定回调中返回false,以防止最大堆栈错误,参见下面的例子:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});