javascript 某些 dom 元素更改高度时的 jQuery 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13936273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery event when some dom element changed height
提问by itsme
Is there any way to set a jquery event when some (anyone) element change his own height ?
当某些（任何人）元素改变自己的高度时，有没有办法设置 jquery 事件？
I really can't find out how can i fire this
我真的不知道我怎么能开这个
thanks to everyone would help me
感谢每个人都会帮助我
like:
喜欢：
$('body *').onHeightChange(function(){
//do somenthing
});
回答by Kevin B
Whenever you do something that changes the height of the element, trigger an event.
每当你做一些改变元素高度的事情时，就会触发一个事件。
$("#somelement").slideDown().trigger("heightchange");
Now you can bind to that:
现在你可以绑定到那个：
$("body").on("heightchange",function(e){
var $el = $(e.target); // the element that has a new height.
});
You could even monkeypatch a lot of the jQuery methods that can change the height and have them test the height before and after using the method and trigger the event accordingly. Below is an untested example
您甚至可以对许多可以更改高度的 jQuery 方法进行猴子补丁，并让它们在使用该方法之前和之后测试高度并相应地触发事件。下面是一个未经测试的例子
var topatch = ["slideup","slidedown","height","width","attr","css","animate"];
$.each(topatch,function(i,method){
var oldfn = $.fn[method];
$.fn[method] = function(){
return this.each(function(){
var $this = $(this), currHeight = $this.css("height"),
result = oldfn.apply($this,arguments);
// check for promise object to deal with animations
if ( $.isFunction(result.promise) ) {
result.promise().done(function(){
if ( currHeight != $this.css("height") ) {
$this.trigger("heightchange");
}
});
return;
}
if ( currHeight != $this.css("height") ) {
$this.trigger("heightchange");
}
});
};
});?
回答by hyankov
I think the only event you can use is the 'DOMSubtreeModified'.
我认为您可以使用的唯一事件是“DOMSubtreeModified”。
回答by Mahmoud Farahat
you should use jQuery mutatewhich has handlers for width, heightand more
你应该使用jQuery mutatewhich 有处理程序width，height等等
回答by SpYk3HH
I thought about it, and I know you already have your answer, the trigger thing is great idea, but if you really want a simple plugin on allpossible elements, you could use what I made below. It's just a simple jQuery plugin that makes use of a timer and a callback function for when a height has changed. See the fiddle for example use. WarningToo many elements on the page could cause issues.
我想了想，我知道你已经有了答案，触发器是个好主意，但如果你真的想要一个包含所有可能元素的简单插件，你可以使用我在下面所做的。它只是一个简单的 jQuery 插件，它在高度发生变化时使用计时器和回调函数。例如使用请参阅小提琴。警告页面上的元素过多可能会导致问题。
jsFiddle
js小提琴
Dirty Plugin
脏插件
(function($) {
if (!$.onHeightChange) {
$.extend({
onHeightChange: function(callBack) {
if (typeof callBack == "string") {
switch (callBack.toLowerCase()) {
case "play":
$.onHeightChange.init();
break;
case "stop":
try { clearInterval($.onHeightChange.timer); } catch(err) { };
break;
}
}
else if (typeof callBack == "function" || callBack == undefined)
{
$.onHeightChange.callback = callBack;
$.onHeightChange.init(callBack);
}
}
});
$.onHeightChange.timer;
$.onHeightChange.init = function(callBack) {
$("body,body *").each(function(i) {
$(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
});
try { clearInterval($.onHeightChange.timer); } catch(err) { };
$.onHeightChange.timer = setInterval(function() {
$("body, body *").each(function(i) {
if ($(this).data("onHeightChange").height != $(this).height()) {
$(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
if ($.onHeightChange['callback']) {
if (typeof $.onHeightChange.callback == "function") return $.onHeightChange.callback .call(this, $(this), $(this).height(), $(this).outerHeight());
}
}
});
}, 100);
};
}
})(jQuery);
Example Use
示例使用
$.onHeightChange(function(ele, height, outer) {
console.log(ele, height, outer);
});
/*---------------------------------------------*/
$.onHeightChange("stop");
$.onHeightChange("play");
