Мышь не работает

Question

У меня есть div, который ждет перехода по событию. Затем он помещает div для информации.

Проблема у меня есть, чтобы удалить прослушиватель событий правильно & также удалить созданный div ... по какой-то причине он не может найти дочерний div, который я создал.

Так что это мой сценарий, который я попробовал:

div.addEventListener('mouseover',bubble_info,false); 


function bubble_info(e){ 
    var x = e.pageX + 50; //push it 50px to the right 
    var div = document.createElement('div'); 
     div.style.position = 'absolute'; 
     div.style.top = e.pageY; 
     div.style.left = x; 
     div.className = 'bubble'; 
     div.innerHTML = 'Testing this div';  
     this.appendChild(div); 

//stop firing if mouse moves around on the parent as it is still "over" the parent 
    this.removeEventListener('mouseover',bubble_info,false); 

//when mouse out occurs the below should fire 
    this.addEventListener('mouseout',function(){clear_hover.call(this,div);},false); 
} 


function clear_hover(child){ 
    //remove the bubble div we made 
    child.parentNode.removeChild(child); 

    //remove the mouse out as we are now out 
    this.removeEventListener('mouseout',function(){clear_hover.call(this,div);},false); 

    //re-add the mouseover listener encase user hovers over it again 
    this.addEventListener('mouseover',bubble_info,false); 
} 

Может ли один видеть ошибки я делаю здесь, просто не могу понять, почему все пошло не так для мыши из.

Dev инструменты показывает Cannot call method 'removeChild' of null

Answer 1

Ошибка указывает, что child.parentNode == null. Таким образом, элемент не содержит parentNode.

if (child.parentNode) 
    child.parentNode.removeChild(child); 

Но это только фиксирует симптом. Фактическая проблема заключается в том, что обработчик события не удаляется, поэтому он продолжает работать с последующими mouseout вхождениями.

Хотя следующие функции схожи, они должны быть одинаковыми для успешного удаления.

this.addEventListener('mouseout',function(){clear_hover.call(this,div);},false); 

this.removeEventListener('mouseout',function(){clear_hover.call(this,div);},false); 

Итак, вам нужно сохранить ссылку на function, чтобы удалить его:

function bubble_info(e){ 
    var ...; 

    function on_mouseout() { 
     // pass a reference to the `function` itself 
     clear_hover.call(this, div, on_mouseout); 
    } 

    // ... 

    this.addEventListener('mouseout',on_mouseout,false); 
} 

function clear_hover(child, handler){ 
    //remove the bubble div we made 
    child.parentNode.removeChild(child); 

    //remove the mouse out as we are now out 
    this.removeEventListener('mouseout',handler,false); 

    // ... 
}