JavaScript event.target IE8 [duplicate]

Question

Possible Duplicate:
Javascript IE Event

I'm having a problem with IE8 executing my script. All other browsers are fine. The actual error is: 'tagName is null or not an object'. I realize that my script is probably not the best, and could use work, but I really need it to work in IE8. The script is wrapped in a document.ready jQuery function, and my jquery version is 1.5.2. I have a feelings that the main problem has to do with var target = ev.target; but Im not sure.

The part of the script in question is:

var hrNav = document.getElementById('hrNavListen');
    var hrNav2 = document.getElementById('hrNavListenTwo');
    var startButton = document.getElementById('startButton');

    //Check to see if the user is on an iPad or iPhone
    var isiPad = (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i)) != null;

    //If the user is on an iphone or ipad, use the touchstart event listener rather than click. Use click otherwise, or use onclick for IE users.
    if (isiPad == true) {
        hrNav.addEventListener('touchstart', highlight);
    } else {
        if(hrNav.addEventListener){  
            hrNav.addEventListener('click', highlight); 
            } else {  
                hrNav.attachEvent('on'+'click', highlight);
        }
    }
/* MAIN FUNCTION TO HIGHLIGHT THE CORRECT ITEM, AS WELL AS FILL IN CORRECT DATA */
    function highlight(ev) {

        var target = ev.target;

        //Function to set the dataSection variable to the appropriate string so that the correct section is loaded
        function switchContent(var1,var2,var3,var4,var5,var6,var7,var8,var9,var10,var11,var12,var13,var14,var15,var16,var17,var18) {
            switch (target.getAttribute('data-section')) {
                case var1:
                    var dataSection = 'hrPortalMain';
                    var btn = false;
                    break;
                case var2:
                    var dataSection = 'handbookMain';
                    var btn = true;
                    break;
                case var3:
                    var dataSection = 'handbookSection1';
                    var btn = true;
                    break;
                case var4:
                    var dataSection = 'handbookSection2';
                    var btn = true;
                    break;
                case var5:
                    var dataSection = 'handbookSection3';
                    var btn = true;
                    break;
                case var6:
                    var dataSection = 'handbookSection4';
                    var btn = true;
                    break;
                case var7:
                    var dataSection = 'handbookSection5';
                    var btn = true;
                    break;
                case var8:
                    var dataSection = 'handbookSection6';
                    var btn = true;
                    break;
                case var9:
                    var dataSection = 'handbookSection7';
                    var btn = true;
                    break;
                case var10:
                    var dataSection = 'handbookSection8';
                    var btn = true;
                    break;
                case var11:
                    var dataSection = 'handbookSection9';
                    var btn = true;
                    break;
                case var12:
                    var dataSection = 'handbookSection10';
                    var btn = true;
                    break;
                case var13:
                    var dataSection = 'handbookSection11';
                    var btn = true;
                    break;
                case var14:
                    var dataSection = 'antiDiscrimination';
                    var btn = true;
                    break;
                case var15:
                    var dataSection = 'substanceAbuse';
                    var btn = true;
                    break;
                case var16:
                    var dataSection = 'disclosureRelease';
                    var btn = true;
                    break;
                case var17:
                    var dataSection = 'emergencyContact';
                    var btn = true;
                    break;
                case var18:
                    var dataSection = 'submitForms';
                    var btn = true;
                    break;
            }/* /end switch */

            //Use jQuery AJAX to load the appropriate html
            $.ajax({
                url: "views/"+dataSection+".php",
                cache: false,
                dataType: "html"
            }).done(function( html ) { 
                $("#hrContent").html(html);
            });

            return dataSection;
        }

        if (target.nodeName === 'LI') {

            $("li").removeClass("navActive");
            $("span").removeClass("navActiveText");
            $("#hrarrow").remove();
            $(".navBodyText").css('margin-left','30px');
            $("#navMain,#navMOCForms,#navHandbookMain,#navGeneralPolicyMain,#navBenefitsMain,#navTaxMain").css('margin-left','0px');

            target.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
            target.className += ' navActive';
            childSpan = target.firstChild;
            childSpan.style.marginLeft = '0';
            childSpan.className += ' navActiveText';
            childSpan.firstChild.className += ' navActiveText';

            switch (target.firstChild.id) {
                case 'navMain':
                    $("#navMain").css('margin-left','-30px');
                    break;
                case 'navMOCForms':
                    $("#navMOCForms").css('margin-left','-30px');
                    break;
                case 'navHandbookMain':
                    $("#navHandbookMain").css('margin-left','-30px');
                    break;
                case 'navGeneralPolicyMain':
                    $("#navGeneralPolicyMain").css('margin-left','-30px');
                    break;
                case 'navBenefitsMain':
                    $("#navBenefitsMain").css('margin-left','-30px');
                    break;
                case 'navTaxMain':
                    $("#navTaxMain").css('margin-left','-30px');
                    break;
            }/* /end switch */


            //Determine which content to load depending on the data-* HTML attribute of each LI elements
switchContent('hrPortalMain','handbookMain','handbookSection1','handbookSection2','handbookSection3','handbookSection4','handbookSection5','handbookSection6','handbookSection7','handbookSection8','handbookSection9','handbookSection10','handbookSection11','antiDiscrimination','substanceAbuse','disclosureRelease','emergencyContact','submitForms');

        }/* /endif */

        if (target.nodeName === 'SPAN') {

            $("li").removeClass("navActive");
            $("span").removeClass("navActiveText");
            $("#hrarrow").remove();
            $(".navBodyText").css('margin-left','30px');
            $("#navMain,#navMOCForms,#navHandbookMain,#navGeneralPolicyMain,#navBenefitsMain,#navTaxMain").css('margin-left','0px');

            target.className += ' navActiveText';
            parent = target.parentNode;

            if (parent.tagName === 'SPAN') {
                parent.parentNode.className += ' navActive';
                parent.className += ' navActiveText';
                parent.parentNode.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
                $(".navActiveText").css('margin-left','0px');
            } else if(parent.tagName === 'LI') {
                parent.className += ' navActive';
                target.firstChild.className += ' navActiveText';
                parent.innerHTML += '<img src="img/hrarrow.png" id="hrarrow"/>';
                $(".navActiveText").css('margin-left','0px');
            }/* /endif */

            switch (target.id) {
                case 'navMain':
                    $("#navMain").css('margin-left','-30px');
                    break;
                case 'navMOCForms':
                    $("#navMOCForms").css('margin-left','-30px');
                    break;
                case 'navHandbookMain':
                    $("#navHandbookMain").css('margin-left','-30px');
                    break;
                case 'navGeneralPolicyMain':
                    $("#navGeneralPolicyMain").css('margin-left','-30px');
                    break;
                case 'navBenefitsMain':
                    $("#navBenefitsMain").css('margin-left','-30px');
                    break;
                case 'navTaxMain':
                    $("#navTaxMain").css('margin-left','-30px');
                    break;
            }/* /end switch */

            //Determine which content to load depending on the data-* HTML attribute of each LI elements
switchContent('hrPortalMain','handbookMain','handbookSection1','handbookSection2','handbookSection3','handbookSection4','handbookSection5','handbookSection6','handbookSection7','handbookSection8','handbookSection9','handbookSection10','handbookSection11','antiDiscrimination','substanceAbuse','disclosureRelease','emergencyContact','submitForms','employeeBenefitsPackage','flexSpending','dentalEnrollment','groupEnrollment','w4','i9','directDeposit','holidayPayroll','medOneForms','generalPolicy','benefitsMain','compensationMain');

        }/* /endif */

    }/* /end highlight function */

Use the developer tools to step through your code to see where your problem is. (See: msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx ) — millimoose
– millimoose, Commented Nov 6, 2012 at 18:55
Also: if you need comments to tell you which block is ending, your code is probably too complicated. switchContent() in particular is ridiculous - use an object to map the value of data-section to the URL. — millimoose
– millimoose, Commented Nov 6, 2012 at 18:58
Also, if you're using jQuery anyway, why not have it handle event subscriptions? highlight() should also probably be two functions, one for <li>s, one for <span>s, since they're mostly handled completely differently. (Or if they're not, the common parts put into helper functions instead of copy-pasting them between blocks.) — millimoose
– millimoose, Commented Nov 6, 2012 at 19:34
Jquery working example stackoverflow.com/questions/1811186/… — Parag
– Parag, Commented Nov 28, 2014 at 8:08

Elias Van Ootegem · Accepted Answer · 2012-11-06 18:56:24Z

30

IE8 doesn't pass an instance of the event object to the handler, you'll have to get it from the global object:

ev = ev || window.event;

It doesn't share all of the properties and methods, either, including target:

var target = ev.target || ev.srcElement;

here's a good site that explains the differences between MS's take on events, and the W3C approach, and all of the headaches that this brings with it...
No ev.preventDefault() but ev.returnValue = false; or ev.cancelBubble = true; instead of ev.stopPropagation(); etc...

answered Nov 6, 2012 at 18:56

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript event.target IE8 [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related