किसी तत्व का आकार बदलना विंडो

Question

का आकार बदलने की घटना को ट्रिगर करता है ऐसा लगता है कि एक HTML तत्व का आकार बदलने पर, विंडोज़ का आकार बदलना ईवेंट भी निकाल दिया जाता है।

चूंकि मैं तत्वों का आकार बदलते समय और खिड़की का आकार बदलते समय विभिन्न तर्क निष्पादित करना चाहता हूं, क्या इस से निपटने का एक गैर-हैकिश तरीका है?

http://jsfiddle.net/CPUwW/1/

$(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();  
}); 

दूसरे शब्दों में, समस्या यह है कि जब मैं एक तत्व का आकार बदलने, आकार बदलने घटना यह के माता-पिता के सभी के लिए निकाल दिया जाता है, भले ही उनके आकार में परिवर्तन नहीं होता

Answer 1

अन्य जानकारी पर आधार मुझे लगता है कि यह खिड़की के व्यवहार को दर्शाता है।

$(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/

Answer 2

ई का प्रयोग है .target:

SEE DEMO

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

Answer 3

काम करता है मुझे Demo

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

Answer 4

आपकी अनाम कार्य करने के लिए पहले तर्क के रूप में स्वीकार करने के लिए e।

यह jQuery Event Object होगा जिसके साथ आप e.stopPropagation (जैसा उपरोक्त टिप्पणियों में डैनियल द्वारा सुझाया गया है) का उपयोग करके ईवेंट के प्रचार को रोक सकते हैं।

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

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

पीपीके के इवेंट ऑर्डर के बारे में एक महान लेखन है जो इवेंट बबलिंग और कैप्चरिंग समझाता है, जो आपको परेशानी का कारण बन रहा है। http://www.quirksmode.org/js/events_order.html

Answer 5

http://www.quirksmode.org/dom/events/resize.html के अनुसार आकार घटना खिड़की पर उपलब्ध है, लेकिन दस्तावेज़ या अन्य तत्वों पर नहीं (हम कुछ अपवाद हैं जो पेज पर उल्लेख किया उपेक्षा करते हैं)।

तो यह वास्तव में unexpectable है कि का उपयोग कर चौड़ाई और/या कुछ तत्व की ऊंचाई बदलने के आकार बदलने योग्य() का कारण बनता है:
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) यह है कि खिड़की के ऊपर बुलबुला और खिड़की के आकार बदलने की घटना को फायर करना अनावश्यक ओवरहेड का कारण बनता है यदि आप बस कुछ div या तो आकार बदलना चाहते हैं।

EDIT2: क्योंकि widgetEventPrefix एक आंतरिक पैरामीटर है, इसका नाम बदल सकता है, इसे हटाया जा सकता है और इसका व्यवहार jQuery UI के नए रिलीज़ में बदला जा सकता है। इसलिए, यूआई को अपग्रेड करते समय, जांचें कि यह पहले की तरह काम करता है।

Answer 6

यह jQuery core में एक बग है, लेकिन यह लक्ष्य जाँच

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

Answer 7

तुम सिर्फ ब्राउज़र का आकार बदलने और तत्व का आकार बदलने के बीच अंतर करने के लिए, आप घटना की 'बुलबुले की संपत्ति की जांच कर सकते की जरूरत है साथ workarounded किया जा सकता है (ङ):

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

जब ब्राउज़र आकार दिया जाता है, e.bubbles गलत है (क्योंकि यह उच्च-स्तरीय इकाई है), लेकिन जब किसी भी दस्तावेज़ तत्व आकार दिया जाता है, यह सच है e.bubbles हो जाएगा।

मैंने क्रोम में इसका परीक्षण किया है ... अन्य ब्राउज़रों के साथ, वाईएमएमवी।