Требуется помощь для совместимости с браузером, отличным от IE, в JavaScript

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. Я вполне уверен, что это не будет надежным с точки зрения кросс-браузер. Вот как я мог бы подойти к этой проблеме, используя 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. Я понял, что моей главной проблемой было то, что я использовал innerText, а не innerHTML в некоторых объявлениях. Изменения заставили мой сайт работать в IE, Firefox и Chrome. Спасибо за все предложения и помощь, хотя. Я ценю это.

Ashley

Answer 3

Теперь я понимаю, в чем проблема.При возникновении события Firefox передает объект события в функцию, а IE устанавливает объект глобального события.

Посмотрите на эту строку:

e = e || event;

Если текущий браузерТо есть аргумент 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)";
}