爲什麼這個調整大小處理程序不起作用？

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

爲什麼這個調整大小處理程序不起作用？

回答

相關問題