JQuery यूआई; चुनिंदा घटनाओं के प्रसार को रोकें

Question

असल में मैं पर jQuery ui's selectable कार्यक्षमता का उपयोग कर रहा हूं, लेकिन उल में अक्सर स्क्रॉलबार होता है, और यह स्क्रॉलबार वेबकिट ब्राउज़र में अनुपयोगी हो जाता है जब से आप इसे पकड़ने के लिए उस पर क्लिक करने का प्रयास करते हैं, lasso चुनिंदा कार्यक्षमता इसके बजाय ओवरटॉप खींचा गया है।

मैंने एक समाधान तैयार किया है, जिसमें कर्सर की स्थिति को जांचने के लिए उल की स्थिति और चौड़ाई के संबंध में कर्सर की स्थिति की जांच करना शामिल है, और यदि ऐसा है, तो चयन करने योग्य 'स्टार्ट' का प्रचार रोकें घटना, लेकिन सशर्त होने के बावजूद जब यह होना चाहिए, न तो झूठी वापसी और न ही घटना के प्रक्षेपण को रोकना चुनिंदा घटनाओं के माध्यम से jquery को प्रगति से रोकने के लिए प्रतीत होता है।

यहाँ मैं jQuery के लिए है .selectablestart घटना:

start: function(event, ui) { 
    var t = event.target; 
    var cutoff = t.scrollWidth + t.offsetLeft 
    if (event.clientX > cutoff) 
    { 
     console.log('NO!'); 
     console.log(event.type); 

     //overkill 
     event.stopPropagation(); 
     event.stopImmediatePropagation(); 

     if (event.stopPropagation) { 
      event.stopPropagation(); 
     } else { 
      event.cancelBubble = true; 
     } 

     return false; 
    } 
} 

सभी सलाह/समाधान की सराहना की, धन्यवाद!

Answer 1

start घटना एक ट्रिक्सी अशुद्ध है। आपको ul की घटना mousedown ईवेंट पर सीधे ईवेंट बुलबुले को रद्द करने के लिए अपना कोड संलग्न करना है, और सुनिश्चित करें कि आपका ईवेंट हैंडलर पहले निष्पादित किया गया हो।

आप jQuery डॉक्स में event.stopPropagation के लिए इस छोटे से लाइन देखेंगे:

ध्यान दें कि यह चल रहा से एक ही तत्व पर अन्य संचालकों नहीं रोकेगा।

तो, जबकि event.stopPropagation घटना बुदबुदाती किसी भी आगे तक डोम, यह बंद नहीं होगा अन्य ईवेंट हैंडलर्स ul संलग्न बुलाया जा रहा है बंद हो जाएगा। इसके लिए selectable इवेंट हैंडलर को कॉल करने के लिए आपको event.stopImmediatePropagation की आवश्यकता है।

$(function() { 
    $("#selectable").mousedown(function (evt) { 
     evt.stopImmediatePropagation(); 
     return false; 
    });   
    $("#selectable").selectable(); 
}); 

ध्यान दें कि आप से पहले ul वस्तु करने के लिए अपने ईवेंट हैंडलर को जोड़ना होगा आप क्रम में चुपके में .selectable() सेटअप समारोह निष्पादित करें:

selectable demo page के आधार पर, इस कोड स्निपेट सफलतापूर्वक बुलबुला रद्द और घटना बुलबुला पहले पॉप।

Answer 2

सैम सी का जवाब मेरे लिए काम नहीं करता था, शायद जिस तरह से मैं # चयन योग्य था।

$('#selectable') 
    .mousedown(function (evt) { 
    if (event.pageX > $(this).offset().left + $(this).width() - $.getScrollbarWidth()) 
    { 
     evt.stopImmediatePropagation(); 
     return false; 
    } 
    }) 
    .selectable({filter: 'div'}); 

जहां $ .getScrollbarWidth() से here

Answer 3

यहाँ है सैम सी के समाधान है कि मेरे लिए बेहतर काम किया पर एक मामूली बदलाव है (केवल mousedown घटना रद्द करके: यह मैं क्या उपयोग किया जाता है अगर यह) स्क्रॉलबार साथ तत्व पर निकाल दिया है:

$(function() { 
    $("#selectable").mousedown(function (evt) { 
     if ($(evt.originalEvent.target).hasClass('ui-dialog')) // <--- variation 
     { 
      evt.stopImmediatePropagation(); 
      return false; 
     } 
     return true; 
    });   
    $("#selectable").selectable(); 
});