为什么这个调整大小处理程序不起作用？

https://jsfiddle.net/57org2ve/2/为什么这个调整大小处理程序不起作用？

HTML：

<div id="at" style="width:100%;background:red"> 
This is a div, you can click on me or resize me. 
</div>

的JavaScript：

$('#at').resize(function(){alert(1)}) 
$('#at').click(function(){alert(2)})

来源

2016-12-17 Aw Qirui Guo

我知道$（窗口）只使用来调整，但在你的情况下，要素要调整大小事件。我也在寻找解决方案 –

我相信resize事件只能在窗口对象上使用，所以你需要使用'$（window）.resize（）'，但它看起来更像是你希望当用户改变元素的大小直接？ – Jhecht

是的，正是我想要一个元素上的resize事件。 –

也许用一个小功能，检查在onResize如果元素的宽度发生了变化。调整浏览器大小并查看控制台日志结果。

$(window).resize(function(){ 
 

 
    var obj = $('#at')[0]; 
 
    if(detectResize(obj)) console.log('resize detected'); 
 

 
}); 
 

 

 
function detectResize(getObject){ 
 
    var getWidth = getObject.getBoundingClientRect().width; 
 
    if(getObject.currentWidth===getWidth){ 
 
    return false; 
 
    } else { 
 
    getObject.currentWidth = getWidth; 
 
    return true; 
 
    } 
 
}

#at{ 
 
    width:100%; 
 
    max-width:400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="at" style="background:red"> 
 
This is a div, you can click on me or resize me. 
 
</div>

来源

2016-12-17 05:54:06

我认为你需要参考此链接

http://marcj.github.io/css-element-queries/

我刚才这个检查JS这对我来说下载这个文件，并检查其工作，希望这将帮助你

var element = document.getElementById('at'); 
new ResizeSensor(element, function() { 
    console.log('Changed to ' + element.clientWidth); 
});

来源

2016-12-17 05:31:22

Upvote我觉得很有意思。 – Jhecht

为什么这个调整大小处理程序不起作用？

回答

相关问题