JavaScript event.target IE8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13257400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript event.target IE8
提问by mdance
Possible Duplicate:
Javascript IE Event
可能重复：
Javascript IE 事件
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.
我在 IE8 执行我的脚本时遇到问题。所有其他浏览器都很好。实际错误是：“tagName 为空或不是对象”。我意识到我的脚本可能不是最好的，可以使用工作，但我真的需要它在 IE8 中工作。该脚本包含在一个 document.ready jQuery 函数中，我的 jquery 版本是 1.5.2。我有一种感觉，主要问题与此有关，var target = ev.target;但我不确定。
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 */
回答by Elias Van Ootegem
IE8 doesn't pass an instance of the event object to the handler, you'll have to get it from the global object:
IE8 不会将事件对象的实例传递给处理程序，您必须从全局对象中获取它：
ev = ev || window.event;
It doesn't share all of the properties and methods, either, including target:
它也不共享所有属性和方法，包括target：
var target = ev.target || ev.srcElement;
here's a good sitethat 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...
这里有一个很好的网站，解释有关事件的MS的起飞之间的差异，以及W3C的做法，和所有的头痛，这给它带来了...
没有ev.preventDefault()，但ev.returnValue = false;还是ev.cancelBubble = true;代替ev.stopPropagation();等...
