Compruebe si el usuario está utilizando IE

Estoy llamando a una función como la siguiente haciendo clic en divs con una clase determinada.

¿Hay alguna manera de verificar al iniciar la función si un usuario está usando Internet Explorer y cancelarla o cancelarla si está usando otros navegadores para que solo se ejecute para usuarios de IE? Todos los usuarios aquí estarían en IE8 o versiones superiores, por lo que no necesitaría cubrir IE7 y versiones inferiores.

Si pudiera saber qué navegador están usando, sería fantástico, pero no es obligatorio.

Función de ejemplo:

$('.myClass').on('click', function(event)
{
    // my function
});

Nov 15 '13 17:11 user2571510

Utilice el siguiente método de JavaScript:

function msieversion() 
{
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0) // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

Puede encontrar los detalles en el siguiente sitio de soporte de Microsoft:

Cómo determinar la versión del navegador a partir del script

Actualización: (soporte IE 11)

function msieversion() {

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

Nov 15 '2013 11:11 SpiderCode

Si lo único que quieres saber es si el navegador es IE o no, puedes hacer esto:

var isIE = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');

if ((old_ie > -1) || (new_ie > -1)) {
    isIE = true;
}

if ( isIE ) {
    //IE specific code goes here
}

Actualización 1: un método mejor

Recomiendo esto ahora. Sigue siendo muy legible y tiene mucho menos código :)

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  //IE specific code goes here
}

Gracias a JohnnyFun en los comentarios por la respuesta abreviada :)

Actualización 2: Pruebas de IE en CSS

En primer lugar, si puede, debe utilizar @supportsdeclaraciones en lugar de JS para comprobar si un navegador admite una determinada función CSS.

.element {
  /* styles for all browsers */
}

@supports (display: grid) {
  .element {
    /* styles for browsers that support display: grid */
  }
}

(Tenga en cuenta que IE no admite @supportsningún tipo de soporte e ignorará cualquier estilo colocado dentro de una @supportsdeclaración).

Si el problema no se puede resolver, @supportspuede hacer esto:

// JS

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  document.documentElement.classList.add('ie')
}

/* CSS */

.element {
  /* styles that apply everywhere */
}

.ie .element {
  /* styles that only apply in IE */
}

(Nota: classListes relativamente nuevo para JS y creo que, fuera de los navegadores IE, solo funciona en IE11. Posiblemente también en IE10).

Si está utilizando SCSS (Sass) en su proyecto, esto se puede simplificar a:

/* SCSS (Sass) */

.element {
  /* styles that apply everywhere */

  .ie & {
    /* styles that only apply in IE */
  }
}

Actualización 3: Agregar Microsoft Edge (no recomendado)

Si también desea agregar Microsoft Edge a la lista, puede hacer lo siguiente. Sin embargo , no lo recomiendo porque Edge es un navegador mucho más competente que IE.

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident|Edge\//.test(ua);

if ( isIE ) {
  //IE & Edge specific code goes here
}

Mar 21 '2014 05:03 Daniel Tonon