Last Updated
Viewed 543,193 Times

I am calling a function like the one below by click on divs with a certain class.

Is there a way I can check when starting the function if a user is using Internet Explorer and abort / cancel it if they are using other browsers so that it only runs for IE users ? The users here would all be on IE8 or higher versions so I would not need to cover IE7 and lower versions.

If I could tell which browser they are using that would be great but is not required.

Example function:

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

I know how to test an ie version using the conditional comments. But, I found out a good and clean way to do it, by testing a javascript method and check if it's supported or not, like:

if(  document.addEventListener  ){
    alert("you got IE9 or greater");
}

But, I don't know how to test it if it's an specific version (like, I want to do something if it's IE8, but not if it's IE7 or IE9 nor other version.

I could use James Panolsey's solution

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

But it does test using Conditional Comments.


Why not Conditional Comments? Because of the Standards mode. As Microsoft states in their website and in the dev center, they do NOT support it in their new versions:

Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. For more info about standards mode, see Defining Document Compatibility.


Testing by a valid Method is more efficient in my POV, But I don't know how to do it in a way to specific the version ... ("Using this you can test for that version"). The only one that I know is the above one that I used as example. Is there others methods that I could use to test it? or not?

I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.

So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.

Any sugestions?

Her is what I've tried

/*****************************
 TOUCH DEVICES HOVER FIX START
 ****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
    return 'ontouchstart' in window // works on most browsers
        || 'onmsgesturechange' in window; // works on ie10
};

// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
    hasTouch = true;
    // Remove event listener once fired, otherwise it'll kill scrolling
    // performance
    window.removeEventListener('touchstart', setHasTouch);
}, false);

// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
    // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
    Modernizr.addTest('touchevents', function() {
        var bool;
        if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
            bool = true;
        } else {
            var query = ['@media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
            testStyles(query, function( node ) {
                bool = node.offsetTop === 9;
            });
        }
        return bool;
    });
});

if(bool===true) {
    console.log('Touch Device'); //your logic for touch device
    jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
        jQ("#btn-1 .tooltip").css('opacity', '0');
        jQ("#btn-2 .tooltip").css('opacity', '0');
        jQ("#btn-3 .tooltip").css('opacity', '0');
    });
}
else {
    //your logic for non touch device
}

Similar Question 3 : Detecting IE using jQuery

$(window).load(function () {
   if($.browser.msie && $.browser.version=="6.0") {
     // do stuff
   }
});

Just realized that $.browser has been depreciated in 1.3. What is the new method for detecting IE, specially IE6.

Similar Question 5 (5 solutions) : js browser detection for IE

Similar Question 6 (3 solutions) : Blocking modern IE?

Similar Question 7 (8 solutions) : How to detect the version of IE

Similar Question 8 (3 solutions) : Javascript alert only in ie8

Similar Question 9 (2 solutions) : Detect full IE version in JavaScript

cc