高难度问题，求解-JS事件问题

Question

////【标志位】
var close_it = true; 
function hiddenPopup(){ close_it=true;
var src_e = event.fromElement;
if(src_e.id==null || src_e.id==""){
event.stopPropagation();
console.log("stop it===");
return;
}
console.log(src_e.id+"##hiddenPopup==="+close_it);

setTimeout(function() {
 reallyCloseit();
 }, 1500);
}
//取消关闭事件
function cancelCloseit(){
var src_e = event.fromElement;
if(src_e.id==null || src_e.id==""){
event.stopPropagation();
console.log("stop it===");
return;
}
console.log(src_e.id+"##cancelCloseit=false");
close_it=false;
}
//真正关闭DIV：id=popupcontent
//close_it是标记位，延长时间段内可以修改。
function reallyCloseit(){
if(!close_it){
console.log("return,close_it="+close_it);
return;
}
console.log("reallyCloseit=OKOK"+close_it);
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
popUp.innerText="";  
}
//这个函数是显示DIV的。
function showPopup(top,left,w,h){}dom模型
这个是【开关】，但鼠标经过时候，弹出一个DIV，离开这个【开关】，过1.5秒钟就关闭这个DIV（方法hiddenPopup），
这1.5秒钟内，如果把鼠标移动到【弹出窗口】，那么这个【弹出窗口】不关闭。
<div id="trick" onmouseover="showPopup(打开窗口的开关);"  onmouseout="hiddenPopup(关闭窗口);">
这个是【弹出窗口】，onmouseover事件调用cancelCloseit();方法
在1.5秒钟内改变了【标志位】close_it的bool值，窗口不会关闭。
离开这个【弹出窗口】，过1.5秒钟就关闭这个DIV（方法hiddenPopup）
<div id="popupcontent" onmouseover="cancelCloseit();"  onmouseout="hiddenPopup();">
<span>很多动态添加的标签SPAN</span><span>很多动态添加的标签SPAN</span><span>很多动态添加的标签SPAN</span>...
</div>
总之，功能就是当鼠标点开【弹出窗口】后，如果鼠标在开关或者这个【弹出窗口】上面，那就不关闭【弹出窗口】
否则，1.5s内关闭窗口。

Answer 1

var popUp = document.getElementById("popupcontent");
var nodes = popUp.getElementsByTagName("span");
for(var k=0;k<nodes.length;k++){
nodes[k].addEventListener('mouseup', function(e) {  e.stopPropagation(); }, false);

}问题在于<span>,事件会冒泡，<span>的事件已经全部屏蔽了。
<span>很多动态添加的标签SPAN</span>，这是麻烦的问题。
当鼠标进入<span></span>，会触发<div id="popupcontent" onmouseout="hiddenPopup();">这个事件。虽然span在这个div里面，但是也还是触发了鼠标移出事件。
因为有很多span标签，所以定时延后关闭有错误，会意外关闭。请问各位如何处理？
谢谢帮忙，我是菜青虫。

Answer 2

cancelCloseit()
操作【标志位】close_it的bool值
关闭窗口先调用hiddenPopup()；这个hiddenPopup()会调用定时器，延长时间执行，在这段时间内，【标志位】close_it这个标志位会改变。要是可以获取鼠标当前位置在Span里面，也可以用于控制【弹出窗口】的效果

Answer 3

将mouseover换成mousemove试下也可尝试用下jQuery来试下。

Answer 4

mousemove？？？？
怎么做？

Answer 5

【开关】,鼠标经过时候，弹出一个DIV，离开这个【开关】，过1.5秒钟就关闭这个DIV.
这1.5秒钟内，如果把鼠标移动到【弹出窗口】，那么这个【弹出窗口】不关闭。
这个就是【开关】上面onmouseover和onmouseout事件，【弹出窗口】上面onmouseover事件吧延迟1.5么可以用 setTimeOut(hiddenPopup(),1500);有很多span标签，所以定时延后关闭有错误，会意外关闭。这个你设置ID就能解决了啊，ID别重复了 仔细检查PS：最好来个全的代码 代码补全吧    零零散散的看的我眼花缭乱

Answer 6

function reallyCloseit(){   
 close_it=false;
    if(!close_it){
        console.log("return,close_it="+close_it);
        return;
    }
    console.log("reallyCloseit=OKOK"+close_it);
    var popUp = document.getElementById("popupcontent");    
    popUp.style.visibility = "hidden";
    popUp.innerText="";  
}
先检查下。用true和false钉死，看效果，再检查下。close_it的赋值。

Answer 7

楼主可以直接试试jQuery里面的弹窗。兼容性都挺好的 支持多种浏览器模式。

Answer 8

当鼠标进入<span></span>，会触发<div id="popupcontent" onmouseout="hiddenPopup();">这个事件。虽然span在这个div里面，但是也还是触发了鼠标移出事件。
这个问题可以考虑用事件的event.srcElement||event.Target目标源来解决，如果源头ID不是DIV就不执行，如果是就执行，这样就不会出现离开SPAN而去触发div id="popupcontent" onmouseout这个事件！

Answer 9

var popUp = document.getElementById("popupcontent");
var nodes = popUp.getElementsByTagName("span");
for(var k=0;k<nodes.length;k++){
    nodes[k].addEventListener('mouseup', function(e) {     e.stopPropagation(); }, false);
            
}
你这么多代码的目的就是防冒泡，其实一个源头判断即可解决，不需要这么多代码循环判断！
比如：
function hiddenPopup(){    close_it=true;
    var src_e = event.fromElement;
    if(src_e.id==null || src_e.id==""){
        event.stopPropagation();
        console.log("stop it===");    
        return;
    }
    console.log(src_e.id+"##hiddenPopup==="+close_it);    
    
    setTimeout(function() {
             reallyCloseit();
     }, 1500);
}
可以试着改:为：function hiddenPopup(){    close_it=true;
    var src_e = event.srcElement||event.Target
    if(src_e.id!="popupcontent"){
        //event.stopPropagation();这里什么也不执行
        //console.log("stop it===");    
        return;//如果源头id非DIV的id,即直接返回就好
    }
    console.log(src_e.id+"##hiddenPopup==="+close_it);    
    
    setTimeout(function() {
             reallyCloseit();
     }, 1500);
}

Answer 10

郁闷的问题是，这个id="popupcontent"的div会触发onmouseout="hiddenPopup();"
当我的鼠标在这个id="popupcontent"的div【里面】移动，到span里面去了，就触发了onmouseout事件。
当移到div【外面】触发这个事件就好了。功能就实现了。要是能解决在div里面span中不触发这个事件？怎么弄？
谢谢@falizixun2
@falizixun2