JQuery UI; Seçilebilir olayların yayılmasını durdur

Question

Temel olarak ul üzerinde jQuery ui's selectable işlevini kullanıyorum, ancak ü sık sık bir kaydırma çubuğuna sahip olacak ve bu kaydırma çubuğu onu almak için tıklatmaya çalıştığınızda Webkit tarayıcılarında kullanılamaz duruma gelir. Bunun yerine seçilebilir işlevsellik üst üste çizilir.

İmlecin kaydırma çubuğu üzerinde olup olmadığını görmek için imlecin konum ve genişliğine göre imlecin konumunu kontrol etmeyi içeren bir çözüm formüle ettim ve eğer öyleyse seçilebilir 'başlat'ın yayılmasını durdurun olay, ama ne zaman şart koşulması yerine getirilse de, ne geri dönüş ne de olayın ilerlemesinin durdurulması, jQuery'nin seçilebilir olaylar boyunca ilerlemesini engelliyor gibi görünmektedir. İşte

jquery için ne var .selectablestart olay:

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; 
    } 
} 

Tüm danışma/çözüm takdir, teşekkürler!

Answer 1

start olay tricksy bir sahte olanıdır. Yapmanız gereken şey, kodun etkinliğini ul'un kendisinin mousedown olayına doğrudan doğrulanmasının iptal edilmesi ve etkinlik işleyicinizin ilk önce çalıştırıldığından emin olmaktır.

Sen event.stopPropagation için jQuery docs bu küçük çizgi görünür: Bu çalışan aynı eleman diğer işleyicileri engel olmayacağını

Not.

Yani, event.stopPropagation iken başka DOM kadar, bu çağrılan diğer olay işleyicileri ul eklemek durmayacak fokurdayan olay duracaktır. Bunun için selectable olay işleyicisini çağırmak için event.stopImmediatePropagation'a ihtiyacınız vardır.

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

Not sen gizlice amacıyla .selectable() kurulum işlevi gerçekleştirmek önce ul nesneye için olay işleyicisi eklemeniz gerekir: selectable demo page dayanarak

, bu kod parçacığı başarıyla baloncuğu iptal ve önce etkinlik balonunu aç.

Answer 2

Sam C'nin cevabı benim için işe yaramadı. Muhtemelen #selectable konumlandırma tarzım nedeniyle. $ .getScrollbarWidth() İşte here

Answer 3

dan

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

benim için daha iyi çalıştı Sam C 'ın çözüm üzerinde hafif bir varyasyonu olan (sadece mousedown olayı iptal ederek: Bu benim kullandığım budur o kaydırma çubuğu ile eleman) ateş eğer:

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