JavaScript中的非IE瀏覽器兼容性所需的幫助

Question

我的代碼適用於IE，但不適用於Firefox。我試圖讓onmousedown和onmouseup事件在IE瀏覽器以外的瀏覽器中工作，以及函數swapFE，swapEF和setUpTranslation。我基本上有瀏覽器加載時出現的法語短語，當我用鼠標點擊一個短語時，他們應該翻譯成英語，當我放開鼠標時，他們應該回到法語。這是基本的想法。任何其他問題都可以隨意問。

你可以看看下面的代碼，並提出我對非IE瀏覽器做錯的建議。如果我取消註釋掉正確的行，但它似乎不適用於Firefox，我可以將它用於IE。

有什麼建議嗎？

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

我能讓我的網站在Firefox中工作。我發現我的主要問題是我在一些聲明中一直使用innerText而不是innerHTML。改變這一點，使我的網站在IE，Firefox和Chrome上運行。感謝所有的建議和幫助。我很感激。

Ashley

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

作爲一個建議，你可能需要一些時間，並研究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事件都具有「文」類的頁面中的元素。然後當mousedown發生時，它會使用類「法語」和「英語」來查找嵌套在該元素中的元素，並顯示/隱藏它們（設置css「display」屬性）以顯示您想要的語言。

所以，如果你願意考慮jQuery作爲一個選項，你可以試試這個。