JavaScript中非IE浏览器兼容性所需的帮助

我的代码可以在IE中使用，但不能在Firefox中使用。我试图让onmousedown和onmouseup事件以及函数swapFE正常工作，swapEF和setUpTranslation在IE以外的浏览器中。我基本上在浏览器加载时会显示法语短语，当我用鼠标单击短语时，它们应翻译为英语，当我松开鼠标时，它们应返回法语。这是基本的想法。任何其他问题都可以问

你能看看下面的代码，并就我在非IE浏览器上的错误提出建议吗。如果我取消注释出正确的行，我可以让它在IE上运行，但在Firefox上似乎不起作用

有什么建议吗

 /*
   Function List:
   eventSource(e)
      Returns the source of an event in either event model

   swapFE(phrase, pnum)
      Changes a French phrase to the English version of that phrase.

   swapEF(phrase, pnum)
      Changes an English phrase ot the Frech version of that phrase.

   setUpTranslation()
      Insert the current week's french phrases into document and set up
      event handlers for the phrases.
*/

//Returns the source of an event in either event model
function eventSource(e) {
   var IE = document.attachEvent ? true:false;
   var DOM = document.addEventListener ? true: false;
   if (IE) return event.srcElement;
   else if (DOM) return e.currentTarget;
}
//I added the function below to try and make it cross-browser compatible but it did not work....help!
//function applysetUpTranslation(phrases[i],"click",swapFE(e),false) {
//if (IE) phrases[i].attachEvent("on"+onmousedown, swapFE(e));
//else if (DOM) phrases[i].addEventListener(click,swapFE(e),true);
//}


function setUpTranslation() {
   var IE = document.attachEvent ? true:false;
   var DOM = document.addEventListener ? true: false;
   var phrasesContainer = document.getElementById("phrases");
   var phrases= phrasesContainer.getElementsByTagName("p");

   for (i = 0; i<phrases.length; i++) {
      phrases[i].number = i;
      phrases[i].childNodes[1].innerHTML = french[i];
      phrases[i].childNodes[1].id = i;

//childNodes[1] is the second span in the <p> array
//I noticed that the function is referenced here as swapFE(event) and the function is written as swapFE(e)...does that make a difference in what shows up??

 //phrases[i].childNodes[1].onmousedown = function() { swapFE(event); };

 phrases[i].childNodes[1].onmousedown = swapFE; 

 //phrases[i].childNodes[1].onmouseup = function() { swapEF(event); }; 

 phrases[i].childNodes[1].onmouseup = swapEF;   

  }

}

//this function changes the French phrase to an English phrase.
function swapFE(e) {
       var phrase = eventSource(e);
       //phrase.innerText = english[phrase.id];
       var parent = phrase.parentNode;
       //childNodes[0] is the number of the phrase +1 
       var idnum = parent.childNodes[0];
       //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number.
       var phrasenum = parseInt(idnum.innerHTML)-1;
       phrase.innerText = english[phrasenum];
       parent.childNodes[1].style.fontStyle= "normal";
       parent.childNodes[1].style.color = "rgb(155, 102, 102)";
  }


function swapEF(e) {
       var phrase = e.srcElement; 
       //phrase.innerText = english[phrase.id];
       var parent = phrase.parentNode;
       var idnum = parent.childNodes[0];
       var phrasenum = parseInt(idnum.innerHTML)-1;
       phrase.innerText = french[phrasenum];
       parent.childNodes[1].style.fontStyle= "italic";
       parent.childNodes[1].style.color= "black";
}

/*
功能列表：
事件源（e）
返回任一事件模型中的事件源
swapFE（短语，pnum）
将法语短语更改为该短语的英语版本。
swapEF（短语，pnum）
将英语短语更改为该短语的Frech版本。
设置翻译（）
将本周的法语短语插入文档并设置
短语的事件处理程序。
*/
//返回任一事件模型中的事件源
函数eventSource（e）{
var IE=document.attachEvent？真：假；
var DOM=document.addEventListener？真：假；
if（IE）return event.src元素；
else if（DOM）返回e.currentTarget；
}
//我添加了下面的功能，试图使其跨浏览器兼容，但它没有工作…帮助！
//函数applysetUpTranslation（短语[i]，“点击”，交换（e），假）{
//如果（IE）短语[i].attachEvent（“on”+onmousedown，swapFE（e））；
//else if（DOM）短语[i].addEventListener（单击，swapFE（e），true）；
//}
函数setUpTranslation（）{
var IE=document.attachEvent？真：假；
var DOM=document.addEventListener？真：假；
var phrasesContainer=document.getElementById（“短语”）；
var phrases=phrasesContainer.getElementsByTagName（“p”）；
对于（i=0；i我现在了解问题所在。
当引发事件时，Firefox会将事件对象传递给函数，而IE会设置一个全局事件对象

请看这一行：

e = e || event;

如果当前浏览器为IE，则参数
e
将未定义，我们应将全局对象
事件
分配给参数
e

function swapFE(e) {
       if (!e) {
           alert("This is IE!");
       }
       else {
           alert("This is not IE!");
       }
       e = e || event;
       var phrase = eventSource(e);
       //phrase.innerText = english[phrase.id];
       var parent = phrase.parentNode;
       //childNodes[0] is the number of the phrase +1 
       var idnum = parent.childNodes[0];
       //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number.
       var phrasenum = parseInt(idnum.innerHTML)-1;
       phrase.innerText = english[phrasenum];
       parent.childNodes[1].style.fontStyle= "normal";
       parent.childNodes[1].style.color = "rgb(155, 102, 102)";
}

作为建议，您可能需要花一些时间研究jQuery，因为它能够跨浏览器处理事件，代码可以简单一点

我还注意到，您正在根据dom节点号设置英语短语。我相当肯定，从跨浏览器的角度来看，这不是一个可靠的方法。下面是我将如何使用jQuery解决这个问题

首先是HTML

<div class="text">
   <span class="french">French Phrase</span>
   <span class="english" style="display:none;">English Phrase</span>
</div>

这两条jQuery语句将mousedown和mouseup事件绑定到页面中所有具有“text”类的元素。然后，当mousedown发生时，它将查找嵌套在该元素中的元素，这些元素的类为“french”和“english”，并显示/隐藏它们（设置css“display”属性）以显示所需的语言

<> >如果你愿意考虑jQuery作为一个选项，你可以试试这个。
 < P>我可以让我的网站在Firefox中工作。我发现我的主要问题是我在一些声明中一直使用内文而不是内HTML。改变了我的网站在伊江、Firefox和Chrome中的工作。谢谢所有的建议和他。不过，我很感激

Ashley
@ChaosPandion-我仍在学习HTML，但我不知道你在说什么。你能给我解释一下吗？还有，我应该在哪里插入这个函数？你是说“实践”吗在你编写的函数中，var node代替var node=null？@Ashley-我将为你展开我的答案。你能让你的问题更明确一些吗？我的答案可能与你的问题无关，因为我不得不猜测你的问题实际上是什么。我的代码在IE中工作，但在Firefox中不工作。我正在尝试让onmousedown和onmouseup事件更明确在IE以外的浏览器中，swapFE、swapEF和setUpTranslation的功能也能正常工作。因此，我希望有人查看我的代码，看看我可能做错了什么，并指出我的方向。我基本上有法语短语出现在浏览器加载时，当我用鼠标点击短语时，它们应该会翻译成英语当我松开鼠标时，他们应该回到法语。这是基本的想法。任何其他问题都可以问。@Joe Mills-谢谢你的建议，但它必须是严格的HTML和JavaScript。你知道如何用这些语言来做吗？谢谢。@Ashley，jQuery是JavaScript。@Aistina-谢谢。我不知道他们是其中之一同样。它们不是一个，也不是一个。jQuery是一个基于Javascript构建的框架。因此，您仍然在使用Javascript，但有一个很好的框架来覆盖所有浏览器兼容性边缘情况。
$('.text').bind("mousedown",function() {
   $(this).find(".french").hide();
   $(this).find(".english").show();
});
$('.text').bind("mouseup",function() {
   $(this).find(".english").hide();
   $(this).find(".french").show();
});