調整元素的大小會觸發窗口的大小調整事件

看起來像調整HTML元素的大小時，窗口的resize事件也會被觸發。調整元素的大小會觸發窗口的大小調整事件

由於我想在調整元素的大小和窗口大小時執行不同的邏輯，有沒有一種處理這個問題的非常方法？

$(function(){ 
    $(window).on('resize', function(){   
      // This event gets fired when the #my_element div gets resized, event if 
      // window doesn't get resized itself 
      $('#text').text(++resizes); 
    }); 

    $('#my_element').resizable();  
});

換句話說，問題是，當我調整的元素，調整大小事件，都會激發所有它的父母，即使他們的大小不會改變

來源

2013-04-09 Loupax

use event.stopPropagation（）; http://api.jquery.com/event.stopPropagation – Daniel 2013-04-09 13:15:48

除非您停止傳播，否則「調整大小」事件會一直顯示到窗口對象。 – 2013-04-09 19:16:12

我認爲這是jQueryUI可調整大小的錯誤，它會觸發窗口大小調整事件，而不考慮返回值或停止傳播狀態。 – Doug 2013-09-29 15:31:26

根據其他信息我認爲這個反映了窗口的行爲。

$(function() { 
    var resizes = 0; 

    $(window).on('resize', function() { 
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable(); 

    $("#my_element").on('resize', function (e) { 
     e.stopPropagation(); 
    }); 

});

http://jsfiddle.net/djwave28/CPUwW/7/

編輯：另類和「更優雅」的解決方案

雖然上述方案的工作完美無瑕，我不滿意具有可調整大小的（）部件外管理。它不一定是。深入挖掘之後，可以在「創建」階段內停止傳播。爲了展示這個解決方案，我將它添加到前一個。

$(function() { 
    var resizes = 0; 

    $(window).on('resize', function() { 
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable({ 
     create: function (event, ui) { 
      $(this).parent().on('resize', function (e) { 
       e.stopPropagation(); 
      }); 
     } 
    }); 
});

更新小提琴：http://jsfiddle.net/djwave28/CPUwW/9/

來源

2013-04-09 13:50:34 Daniel

偉大的東西。謝謝 – ALFmachine 2016-01-16 13:51:16

使用電子郵件.TARGET：

SEE DEMO

$(window).on('resize', function(e){ 
     if(e.target===this)   
      $('#text').text(++resizes); 
    });

來源

2013-04-09 13:20:05

這不是問題。顯然，窗口大小是@Loupax所要求的。無論你想閱讀還是不閱讀，你都在制定一個條件。 – Daniel 2013-04-09 13:24:14

「因爲我想在調整元素大小和窗口大小時執行不同的邏輯」我的回答回答了這個問題。但是你是這樣對待的：「問題是，當我調整一個元素的大小時，即使它們的大小沒有改變，resize事件也會被所有的父母觸發。」這裏的解決方案應該是使用event.stopPropagation（）;在可調整大小元素的每個處理程序上 – 2013-04-09 13:28:53

是的，但有趣的部分是在哪裏實現。（???）..我嘗試了文檔，但目前還沒有運氣。你說得對，我很遺憾我錯過了讀邏輯部分的行爲。 – Daniel 2013-04-09 13:35:31

對我的作品Demo

if (e.originalEvent.type == 'resize'){ 
     $('#textWindow').text(++resizesWindow); 
    } else { 
     $('#text').text(++resizes); 
    }

來源

2013-04-09 13:28:50 b0zar

接受e作爲第一個參數的匿名函數。

這將是jQuery Event Object，您可以使用它阻止使用e.stopPropagation傳播事件（如Daniel在上述註釋中所建議的那樣）。

$(function(){ 
    $(#my_element).on('resize', function(e){ 
    e.stopPropagation();  
    $('#text').text(++resizes); 
    }); 

    $('#my_element').resizable();  
});

PPK有關於事件順序解釋事件冒泡和捕獲的一個很好的寫法，這是什麼導致你在這裏遇到麻煩。 http://www.quirksmode.org/js/events_order.html

來源

2013-04-09 13:29:03 mavame

根據http://www.quirksmode.org/dom/events/resize.html resize事件可在窗口上，但不是在文件或其他元素（如果我們忽略在該網頁提到的一些例外）。

所以這是真的不可預料的，使用改變某些元件的寬度和/或高度可調整大小（）導致：
1）調整事件在所有
2燒成）調整事件冒泡至窗口對象

如果我只想使$（'＃elem'）可調整大小，那就是我想要的。沒有任何冒泡或窗口調整事件觸發。

我做了一個行更改爲例子小提琴（和更新庫更多的最新版本）：

http://jsfiddle.net/CPUwW/56/

// The following line is the needed change. widgetEventPrefix is 
// originally 'resize'. It have to be changed. 

$.ui.resizable.prototype.widgetEventPrefix = 'myresize'; 

$(function(){ 
    var resizes = 0; 
    $(window).on('resize', function(){   
     $('#text').text(++resizes); 
    }); 
    $('#my_element').resizable();  
});

編輯：在此頁面上的其他解決方案的問題（和也是here）是冒泡到窗口和觸發窗口的resize事件導致不必要的開銷，如果你只是想調整一些div的大小。

編輯2：因爲widgetEventPrefix是一個內部參數，它的名字可以改變，它可以被刪除，它的行爲可以在新版本的jQuery UI中改變。所以，在升級用戶界面時，請檢查它是否像以前一樣工作。

來源

2015-05-20 12:45:29

這是jQuery core一個錯誤，但它可以與目標檢查

$(window).resize(function(e) { 
if (e.target == window) 
/* do your stuff here */; 
})

來源

2016-09-21 05:40:07

如果你只需要瀏覽器大小調整和元調整大小來區分，則可以選中「泡沫」事件的性質來workarounded （E）：

$(window).resize(function(e) 
    { 
    if (!e.bubbles) 
     { 
     clearTimeout(resizeId); 
     resizeId = setTimeout(doneResizing, 250); 
     } 
    });

當瀏覽器的大小時，e.bubbles是假的（因爲它是頂級實體），但在任何文檔元素的大小時，e.bubbles將是真正的。

我已經在Chrome中...與其他瀏覽器YMMV進行了測試。

來源

2017-01-10 00:15:56

調整元素的大小會觸發窗口的大小調整事件

回答

相關問題