一个简单HTML鼠标事件问题的衍化历程

第一版：

鼠标经过的时候弹出提示，0.5秒之后自动关闭。（鼠标经过弹出，鼠标移开关闭，在HTML中密集排列A标签的时候，会因鼠标移动而闪烁，完全看不清提示。所以必须有时效否则关闭不了。）

function mopen()
{
    document.getElementById('traincontent').style.display = 'block';        
            
}        

function mclose()
{
    document.getElementById('traincontent').style.display = 'none';
}

function mclosetime()
{
    closetimer = window.setTimeout(mclose, 500);
}

HTML:

<a onmouseout="mclosetime()" onmouseover="mopen()"></a>

第二版（IE8 BUG版）：

上边要求说，不要鼠标经过的时候弹出提示，应该鼠标点击上去再弹出提示，并且，鼠标再次点击的时候，要关闭提示。

于是我将第一版做了一些修改，想到了把onmouseout 和 onmouseover 改成 onmouseup 和 onmousedown，并且在javascript 中操纵onclick事件。

不过，由于我一时糊涂，代码冗余，导致了IE8的错乱。。。鼠标点击A标签的时候，提示内容会闪烁，而不是维持着。火狐没有问题（感谢包容。。。）

function mopen()
{
    document.getElementById('traincontent').style.display = 'block';        
            document.onclick = mclose;
}        

function mclose()
{
    document.getElementById('traincontent').style.display = 'none';
}

function mclosetime()
{
    document.onclick = mopen;
}

HTML：

<a onmouseup="mclosetime()" onmousedown="mopen()"></a>

为了排除IE8的问题，我一度梦想JS代码本身很好，是HTML在IE8中的问题，想到了CLEARFIX或者HASLAYOUT，结果都没一毛钱关系。

最后还是只能对着自己写的JS挑毛病。

改写成JQUERY以后，问题还是存在。并不是由于我改得不伦不类。。（那句document.onclick = mopen；我竟然不会改写JQUERY。。。）

改写后：

function mopen()
{
    $('#traincontent').css('display','block');        
            document.onclick = mclose;
}        

function mclose()
{
    $('#traincontent').css('display','none');
}

function mclosetime()
{
    document.onclick = mopen;
}

第三版

秉承平时调浏览器差异的瞎猫死老鼠乱撞原则，我扔掉了鸡肋的mclosetime函数（没有时间控制还留它干嘛）:

function mopen()
{
    $('#traincontent').css('display','block');        
            document.onmousedown = mclose;
}        

function mclose()
{
    $('#traincontent').css('display','none');
}

HTML：

<a onmouseup="mclose()" onclick="mopen()"></a>

转载于:https://www.cnblogs.com/haimingpro/archive/2013/01/09/2852566.html