javascript - multiselect - list jquery

JQuery UI; Detenga la propagación de eventos seleccionables

Question

Básicamente estoy usando la funcionalidad seleccionable de jQuery ui en un ul , pero el ul muchas veces tiene una barra de desplazamiento, y esta barra de desplazamiento se vuelve inutilizable en los navegadores Webkit ya que cuando intentas hacer clic para agarrarlo, se dibuja el lazo para la funcionalidad seleccionable overtop en su lugar.

He formulado una solución, que implica verificar la posición del cursor en relación con la posición y el ancho de la ul para ver si el cursor está sobre la barra de desplazamiento, y si es así, detener la propagación del evento ''inicio'' seleccionable, pero a pesar el hecho de que se cumpla el condicional cuando debería ser, ni el retorno falso ni la detención de la progación del evento parece impedir que jquery progrese a través de los eventos seleccionables.

Esto es lo que tengo para el evento de start jquery .selectable :

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

Todos los consejos / soluciones apreciados, ¡Gracias!

Answer 1

Aquí hay una pequeña variación en la solución de Sam C que funcionó mejor para mí (cancelando solamente el evento mousedown si se dispara en el elemento con la barra de desplazamiento):

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

Answer 2

El evento de start es un falso truco. Lo que necesita hacer es adjuntar su código para cancelar el evento de borboteo directamente al evento de mousedown del propio ul , y asegúrese de que su controlador de eventos se ejecute primero.

Verá en los documentos de jQuery para event.stopPropagation esta pequeña línea:

Tenga en cuenta que esto no evitará que otros controladores en el mismo elemento se ejecuten.

Entonces, mientras event.stopPropagation detendrá el evento burbujeando más allá del DOM, no detendrá los otros manejadores de eventos adjuntos al ul se llama. Para eso, necesita event.stopImmediatePropagation para detener el llamado al evento selectable .

Basado en la página de demostración seleccionable , este fragmento de código cancela exitosamente la burbuja:

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

Tenga en cuenta que debe agregar su controlador de eventos al objeto ul antes de ejecutar la función de configuración .selectable() para colarse y hacer estallar primero la burbuja de eventos.

Answer 3

La respuesta de Sam C no funcionó para mí, probablemente por la forma en que posicioné #selectable. Esto es lo que utilicé:

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

donde $ .getScrollbarWidth () es de aquí