5

可能重复:
Javascript IE 事件

我在 IE8 执行我的脚本时遇到问题。所有其他浏览器都很好。实际错误是:'tagName 为空或不是对象'。我意识到我的脚本可能不是最好的,并且可以使用工作,但我真的需要它在 IE8 中工作。该脚本包含在一个 document.ready jQuery 函数中,我的 jquery 版本是 1.5.2。我感觉主要问题与此有关,var target = ev.target;但我不确定。

有问题的脚本部分是:

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 */
4

1 回答 1

30

IE8 不会将事件对象的实例传递给处理程序,您必须从全局对象中获取它:

ev = ev || window.event;

它也不共享所有属性和方法,包括target

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

这是一个很好的网站,它解释了 MS 对事件的看法与 W3C 方法之间的差异,以及随之而来的所有令人头疼的问题……
ev.preventDefault(),但ev.returnValue = false;ev.cancelBubble = true;代替ev.stopPropagation();等……

于 2012-11-06T18:56:24.177 回答