Как решить - элемент DIV мигает / исчезает сразу после рендеринга

Question

Вот что происходит

• После загрузки страницы javascript читает XML из базового кода
• XML содержит набор идентификаторов полей и соответствующий контент для отображения во всплывающих окнах, когда указатель мыши находится над указанным идентификатором поля.

Мой код генерирует несколько всплывающих окон в виде элементов div со стилями

.render{
 background-color:    #fffc80;
 border:             .1em solid rgb(200, 128, 0);
 padding-left:        2px;
 padding-right:       2px;
 z-index:             1000;
}

.hide{
 display:none;
}

Все созданные всплывающие окна привязаны к корневому элементу.

РЕДАКТИРОВАНИЕ: Добавлены фрагменты скрипта

Обработчики событий прикреплены, как показано ниже

// instantiate a div element

var myDiv = document.createElement('div');

// generate an ID 

myDiv.id = generatePopupId(getFieldId());

// attach the content from the XML into the new div element

myDiv.innerHTML = getPopupContent();

// apply mouseover/out handlers to the main element

document.getElementById(getFieldId()).onmouseover = function(){
  showPopup(generatePopupId(getFieldId()));
};

document.getElementById(getFieldId()).onmouseout = function(){
  hidePopup(generatePopupId(getFieldId()));
}; 


// read the X coordinate of the present position of the mouse

function getX(){
  var e = window.event;
  posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  return posX;
}

// read the Y coordinate of the present position of the mouse

function getY(){
  var e = window.event;
  posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  return posY;
}

// Show the popup element at the current mouse location

function showPopup(popupId){
  var posX = getX();
  var posY = getY();

  var poppyElement = document.getElementById(popupId);

  poppyElement.className = 'render';
  poppyElement.style.left = posX;
  poppyElement.style.top  = poxY;
  poppyElement.style.position = 'absolute';
  poppyElement.style.display = '';

}

// hide the popup element

function hidePopup(popupId){
  var poppyElement = document.getElementById(popupId);

  poppyElement.className = 'hide';

}

У меня вопрос: почему элемент мигает и сразу исчезает, вместо того, чтобы торчать из-за события мыши?

С уважением, Абхишек

Answer 1

Во-первых, вам нужно быть осторожнее с чувствительностью к регистру. Это должно быть clientWidth (заглавная W) и top (маленькая т). Во-вторых, когда вы устанавливаете CSS left и top, вы должны добавить суффикс +'px' к значению; само по себе целое число недопустимо.

Также, если вы хотите узнать высоту окна просмотра, document.body - это неправильное место для поиска. Это будет работать только в режиме IE Quirks, которого вы, как правило, хотите избежать, как чумы. Добавьте стандартную декларацию <!DOCTYPE, и вы сможете использовать document.documentElement в разных браузерах. (Или ответвление на window.innerHeight для браузеров, отличных от IE.)

В любом случае, если нет больше CSS, который вы нам не показывает, установка стилей left и top не будет иметь никакого эффекта вообще, потому что div .render не position: absolute. Вы не показываете, как именно они прикреплены к документу, но, поскольку они, по-видимому, не являются абсолютно позиционированными, они являются частью потока документов и могут вызвать смещение / переформатирование страницы, когда они не видны. Если из-за этого элемент будет перемещен, он больше не будет находиться под указателем, и вы сразу получите событие отключения мыши.

(Это также могло бы произойти с абсолютным позиционированием, если находящийся объект находился под местом, где появилось всплывающее окно.)

(Кроме того, скрытие / скрытие немного избыточно. Оставьте style.display в покое и просто установите className в 'render' или 'render hide'.)

Answer 2

Изменение элементов в JavaScript может приводить к изменению элемента, на который наведен курсор, что может вызывать событие отключения мыши путем изменения, а не фактического перемещения мыши из координат.