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

Question

我的代码在 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";
}

Answer 1

作为一个建议，您可能需要花一些时间研究 jQuery，因为它处理跨浏览器事件的能力非常好。执行您想要执行的操作的代码可能更简单一些。

我还注意到您正在根据 dom 节点号设置英文短语。从跨浏览器的 Angular 来看，我相当确定这不会可靠。以下是我将如何使用 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 事件绑定(bind)到页面中具有“文本”类的所有元素。然后，当 mousedown 发生时，它会查找嵌套在该元素中的类为“french”和“english”的元素，并显示/隐藏它们(设置 css“display”属性)以显示您想要的语言。

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