JQuery UI; Zatrzymaj propagację zdarzeń do wyboru

Question

Zasadniczo używam funkcji jQuery ui's selectable na , ale ul często ma pasek przewijania, a pasek przewijania staje się bezużyteczny w przeglądarkach Webkit, ponieważ gdy spróbujesz go kliknąć, aby go pobrać, lasso dla wybrana funkcja jest zamiast niej rysowana.

Mam sformułowane rozwiązanie, które polega na sprawdzeniu pozycji kursora w stosunku do pozycji i szerokości ul, aby zobaczyć, czy kursor znajduje się nad paskiem przewijania, a jeśli tak, zatrzymaj propagację wybieranego "startu" zdarzenie, ale pomimo warunkowego spełnienia, kiedy powinno być, ani zwracanie fałszywego ani zatrzymywanie postępu zdarzenia nie pozwala jquery na przechodzenie przez wybieralne zdarzenia.

Oto co mam do jQuery .selectablestart wydarzenie:

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

Wszelkie porady/rozwiązania docenione, dzięki!

Answer 1

Impreza start jest sztuczna. Musisz tylko załączyć swój kod, aby anulować bulgotanie zdarzenia bezpośrednio do zdarzenia mousedown samego siebie i upewnić się, że procedura obsługi zdarzenia jest wykonywana jako pierwsza.

Zobaczysz w docs jQuery dla event.stopPropagation ten mały wiersz:

Zauważ, że to nie przeszkodzi inne teleskopowe na tym samym elemencie z biegania.

Tak, podczas gdy event.stopPropagation zatrzyma zdarzenie propagacji dalej aż DOM, to nie zatrzyma pozostałe obsługi zdarzeń dołączyć do ul miano. Aby to zrobić, musisz event.stopImmediatePropagation zatrzymać wywoływanie programu obsługi zdarzeń selectable.

podstawie selectable demo page ten fragment kodu z powodzeniem anuluje bańki:

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

pamiętać, że należy dodać obsługi zdarzeń do ul obiektu przed wykonać funkcję .selectable() konfiguracji, aby wkraść się i najpierw pop bańki zdarzeń.

Answer 2

Odpowiedź Sam C nie działa dla mnie, prawdopodobnie ze względu na sposób, w jaki ustawiłem #selectable. To, co kiedyś:

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

gdzie $ .getScrollbarWidth() jest z here

Answer 3

Oto niewielkie zmiany na rozwiązania Sam C „s, który pracował dla mnie lepiej (tylko o anulowanie zdarzenia mouseDown jeśli jest zwolniony na elemencie z przewijania):

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