Блог

Главная - Вопросы по программированию - Всплывающая подсказка Javascript не работает в Chrome

Всплывающая подсказка Javascript не работает в Chrome

#javascript #html #css

#javascript #HTML #css

Вопрос:

Всплывающая подсказка на основе выпадающего списка, которая работает во всех браузерах, кроме Chrome

 function showTip(oSel) {
  var theTip = document.getElementById("spnTip");
  theTip.style.top = window.event.clientY   20;
  theTip.style.left = window.event.clientX;
  theTip.innerText = oSel.options[oSel.selectedIndex].text;
  theTip.style.visibility = "visible";
}

function hideTip() {
  document.getElementById("spnTip").style.visibility = "hidden";
}  
 <select onmouseout="hideTip()" onmouseover="showTip(this)" style="width:100px;">
  <option>Have you seen the latest M. Night Shyamalan film?</option>
  <option>It's called The Village.</option>
  <option>Although the critics didn't like it, I think it was extremely well done.</option>
  <option>You will be kept in suspense even if you think you have figured out the ending.</option>
</select>
<span onmouseout="hideTip()" style="position:absolute; top:-35px visibility:hidden; background:#fefed5;
 border:1px solid #666666; padding:2px; font-size:12pt; font-family:Tahoma;" id="spnTip"></span>

Комментарии:

1. Ах, совершенно верно. Исправлено.

2. Не могли бы вы уточнить, что такое «не работает»? Вы получаете какие-либо ошибки? Отображается ли она в неправильном месте? Сбой вашего компьютера?

3. если она работает нормально :), к сожалению, она не работает в Firefox : (

4. Не могли бы вы, пожалуйста, не унижать меня. Я просто изучаю веб-разработку. просто дайте мне знать, что я сделал неправильно, тогда я смогу изучить это. Поэтому, пожалуйста, не ухудшайте, пожалуйста, пожалуйста

5. @ShafeerAthimannil Я предполагаю, что отрицательный результат был вызван тем, что вы не предоставили никаких сообщений об ошибках, которые вы получаете в FireFox. установите FireBug или нажмите CTRL SHIFT J и откройте консоль ошибок.

Ответ №1:

В вашем коде есть ряд ошибок.. Я остановлюсь на нескольких.

Внутренний текст не работает в Firefox. вам нужно использовать textContent . Кроме того, window.event ничего не возвращает в firefox. Вам необходимо подключиться к объекту события, возвращаемому вызовом функции. (я правильно понял?)

Вот пример привязки события к функции и использования объекта event и этого. поскольку мы привязываем функцию к событию, вызываемому элементом select, это будет указывать на этот элемент. Поэтому нам не нужно передавать ее в функцию.

 var showTip = function(event) {
    var theTip = document.getElementById("spnTip");
    theTip.style.top = event.clientY   20   "px";
    theTip.style.left = event.clientX   "px";
    theTip.innerText = theTip.textContent = this.options[this.selectedIndex].innerText || this.options[this.selectedIndex].textContent;
    theTip.style.display = "block";
    theTip.addEventListener("mouseout", hideTip, false);
};
var hideTip = function() {
    this.style.display = "none";
};


var sel = document.getElementById("selectId");
sel.addEventListener("mouseover", showTip, false);

Вам также нужно будет добавить код жалобы для IE. 

 <select id="selectId" style="width:100px;">
<option>Have you seen the latest M. Night Shyamalan film?</option>
<option>It's called The Village.</option>
<option>Although the critics didn't like it, I think it was extremely well done.</option>
<option>You will be kept in suspense even if you think you have figured out the ending.</option>
</select>
<span style="position:absolute; top:-35px; display: none; background:#fefed5;
 border:1px solid #666666; padding:2px; font-size:12pt; font-family:Tahoma;" id="spnTip"></span>

демонстрация здесь