Question

我的代码适用于IE但不适用于Firefox。我试图在IE以外的浏览器中使用onmousedown和onmouseup事件以及函数swapFE，swapEF和setUpTranslation。我基本上会在浏览器加载时出现法语短语，当我用鼠标点击一个短语时，他们应该翻译成英语，当我放松鼠标时，他们应该回到法语。这是基本的想法。任何其他问题随时可以问。

您能看一下下面的代码，并就非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";
}

Answer 1

作为一个建议，您可能需要花一些时间来研究jQuery，因为它能够跨浏览器处理事件是非常好的。做你想做的事情的代码可能会更简单。

我还注意到你正在根据dom节点号设置英语短语。我很确定从跨浏览器的角度来看这不可靠。以下是我将如何使用jQuery解决该问题。

首先是HTML

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

根据需要重复多次。

现在有些jQuery

$('.text').bind("mousedown",function() {
   $(this).find(".french").hide();
   $(this).find(".english").show();
});
$('.text').bind("mouseup",function() {
   $(this).find(".english").hide();
   $(this).find(".french").show();
});

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

因此，如果你愿意考虑将jQuery作为一个选项，你可以试试这个。

Answer 2

我现在明白问题所在。在引发事件时，Firefox会将事件对象传递给该函数，而IE将设置一个全局事件对象。

看看这一行：

e = e || event;

如果当前浏览器是IE，则参数e将是未定义的，我们应该将全局对象event分配给参数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)";
}

Answer 3

我能够让我的网站在Firefox中运行。我发现我的主要问题是我在某些声明中一直使用innerText而不是innerHTML。改变使我的网站在IE，Firefox和Chrome中运行。感谢所有的建议和帮助。我很感激。

阿什利

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

3 个答案: