jquery - El evento mousedown sobre las opciones en select no funciona en IE. ¿Hay alguna solución?

internet-explorer cross-browser

Question

El siguiente fragmento de código es para evitar la necesidad de presionar Ctrl y hacer clic en un cuadro de selección múltiple.

pero no funciona en IE 8.

¿Hay algún trabajo para lograr lo mismo en IE y en otra versión de IE?

$(''option'').mousedown(function(e) {
  e.preventDefault();
  $(this).prop(''selected'', !$(this).prop(''selected''));
  return false;
});

Answer 1

No creo que haya ninguna forma de obtener el mousedown o click evento en un elemento de option en IE8.

Si realmente desea el comportamiento que describe, le sugiero que use un control diferente, en lugar de un cuadro de select múltiple. Cambiar el comportamiento de los componentes UI estándar generalmente no es una buena idea, ya que los usuarios están acostumbrados a que se comporten de cierta manera y se confundan cuando se comportan de manera diferente en algunas aplicaciones / páginas que en otras. Si desea una lista con un simple clic, haga clic en el comportamiento, mucho mejor para hacer algo completamente suyo.

Puede hacer esto con una select múltiple, pero la experiencia del usuario es realmente fea:

var selected = {};
$(''#yourSelectBox'').click(function(e) {
    var $this = $(this),
        options = this.options,
        option,
        value,
        n;

    // Find out what option was just added
    value = $this.val();

    // Re-apply the selections
    for (n = 0; n < options.length; ++n) {
        option = options[n];
        if (option.value == value) {
            // The one being updated
            selected[value] = !selected[value];
        }

        // One of the others
        option.selected = !!selected[option.value];
    }

    return false;
});

Ejemplo en vivo | Fuente

De nuevo, sin embargo, esa es una experiencia de usuario realmente fea.

Aquí hay un ejemplo de una pseudo-selección en su lugar: Live Ejemplo | Fuente

CSS:

.pseudo-select {
    border: 1px solid black;
    width: 200px;
}
.pseudo-option {
    cursor: pointer;
    border: 1px solid #eee;
}
.pseudo-option.selected {
    background-color: #33c;
    color: white;
}

HTML:

<div class="pseudo-select">
    <div class="pseudo-option" data-value="1">One</div>
    <div class="pseudo-option" data-value="2">Two</div>
    <div class="pseudo-option" data-value="3">Three</div>
    <div class="pseudo-option" data-value="4">Four</div>
    <div class="pseudo-option" data-value="5">Five</div>
    <div class="pseudo-option" data-value="6">Six</div>
    <div class="pseudo-option" data-value="7">Seven</div>
    <div class="pseudo-option" data-value="8">Eight</div>
    <div class="pseudo-option" data-value="9">Nine</div>
</div>

JavaScript usando jQuery:

$(".pseudo-option").click(function() {
    $(this).toggleClass("selected");
});

Eso es algo que me precipité en un par de minutos, obviamente, hay mucho margen de mejora, pero entiendes la idea.

Nota : Si utiliza algo como esto, querrá detectar navegadores y navegadores móviles usando tecnologías de asistencia (lectores de pantalla, etc.) y usar una select normal en su lugar (ya que el navegador hará un mejor trabajo al trabajar con el usuario en esas situaciones.).