onclick 与 onmousedown onblur

onclick 相当于 在某一元素上触发了 onmousedown（即鼠标按下）后 任然在该元素 上 触发了onmouseup（鼠标按键弹起）才触发 onclick;

有以下情况： 对于某元素A 绑定了 click事件 并同时对另外 的元素B 绑定onblur事件， 这时候，当在A上mousedown后，即触发了B元素的onblur事件，该事件函数执行后的效果是 改变了DOM结构，使得鼠标已经不在在元素A之上。 这时鼠标任然没有mouseup ，在mouseup之后，以为会触发click事件，实际上却不能触发，见以下模型：
<body>
<input id="a" type="text" />
<div id="c" style="display:none">此处显示  id "c" 的内容</div>
<br />
<br />
<a href="#" id="b" style=" border:1px solid #333; height:100px; display:block">click</a>
<script>

function $(oID) {
        return  document.getElementById(oID);
}
$('a').onblur=function(){
        $('c').style.display="";
        document.title        +=        "A";
};
$('b').onclick=function(){
        document.title        +=        "B";
}
</script>
</body>


即 onclick的条件是onmousedown与onmouseup必须作用于同一元素。

对于以上例子，为了能触发click事件，改进如下：

<body>
<input id="a" type="text" />
<div id="c" style="display:none">此处显示  id "c" 的内容</div>
<br />
<br />
<a href="#" id="b" style=" border:1px solid #333; height:100px; display:block">click</a>
<script>
var isonreadyblur,maybenotfireblur;
function $(oID) {
        return  document.getElementById(oID);
}
$('a').onblur=function(){
        if(maybenotfireblur&&!isonreadyblur) return;
        $('c').style.display = "";
        document.title        +=        "A";
};
$('b').onclick=function(){
        document.title        +=        "B";
}
$('b').onmousedown=function(){
        maybenotfireblur=true;

        
}
$('b').onmouseup=function(){
        isonreadyblur=true;
        $('a').onblur();
        maybenotfireblur=false;
        
}
</script>
</body>


新增评论

分类导航