监听元素宽高变化resize

最新推荐文章于 2024-08-22 08:30:22 发布

滑过了流星

最新推荐文章于 2024-08-22 08:30:22 发布

阅读量4.7k

点赞数 1

分类专栏： jquery javascript 文章标签：监听元素宽高变化

本文链接：https://blog.csdn.net/qq_37742572/article/details/87883528

版权

本文介绍了如何重构resize()方法以支持监听元素的宽高变化。在JavaScript中，resize事件默认仅支持window对象，但通过特定的方法，可以在元素级别实现监听。文章提供了在已引入jQuery的情况下，实现这一功能的代码示例和使用方法。

摘要由CSDN通过智能技术生成

首先我们先了解js中resize功能只支持window对象
正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的。

1.重构resize()

在已经引入jquery的情况下
js文件中增加以下代码

(function($, h, c) {
	var a = $([]),
	e = $.resize = $.extend($.resize, {}),
	i,
	k = "setTimeout",
	j = "resize",
	d = j + "-special-event",
	b = "delay",
	f = "throttleWindow";
	e[b] = 250;
	e[f] = true;
	$.event.special[j] = {
		setup: function() {
			if (!e[f] && this[k]) {
				return false;
			}
			var l = $(this);
			a = a.add(l);
			$.data(this, d, {
				w: l.width(),
				h: l.height()
			});
			if (a.length === 1) {
				g();
			}
		},
		teardown: function() {
			if (!e[f] && this[k]) {
				return false;
			}
			var l = $(this);
			a = a.not(l);
			l.removeData(d);
			if (!a.length) {
				clearTimeout(i);
			}
		},
		add: function(l) {
			if (!e[f] && this[k]) {