鼠标悬停不起作用
Mouse over not working
我有一个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);
}
有人能看到我在这里犯的错误吗?就是不明白为什么鼠标掉了都错了。
开发工具显示Cannot call method 'removeChild' of null
错误表明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);
// ...
}
相关文章:
- 悬停时的Jquery不起作用
- 为什么jQuery悬停方法在这种情况下不起作用
- Jquery悬停选择不起作用
- 悬停时颜色变为灰度在IE11中不起作用
- 淡入淡出链接悬停不起作用
- 简单的鼠标悬停在 Chrome 中不起作用
- 悬停时函数在具有相同 id 的多个元素中不起作用
- 悬停不起作用时对不透明度更改进行动画处理
- .CSS.:悬停在导航>李上不起作用
- 当加载带有hastags的动态内容-URI时,Jquery-悬停效果不起作用
- CSS悬停在JQuery循环的最后一条记录中不起作用
- jquery悬停在图像上不起作用
- 鼠标悬停功能获胜'不起作用
- 悬停缩放在数据表的第二页上不起作用
- kwicks滑块正在加载,但鼠标悬停不起作用
- 悬停内容悬停不起作用
- 鼠标悬停导航链接不起作用
- Chart.js-悬停弹出-添加带值的标签-不起作用
- 鼠标悬停元素在使用量角器时不起作用
- 伪类悬停在 JavaScript ImageSwap 中不起作用