JavaScript同时触发onblur和onclick后者失效未触发成功

SJY发表于:2018年04月11日 12:14 • 阅读:

现有一个类型为text的input框,绑定事件 onblur,当鼠标焦点离开该框时触发,用来验证内容格式
另一个类型为button的input框,绑定事件 onclick,点击这个按钮时要先去检查表单的内容格式
正常情况下,我们填写完数据后,鼠标点击其他地方,就会触发onblur。但如果在text框里填写完数据后,直接点击button按钮,这时即触发了onblur也触发了onclick,而在某种情况下,后者往往不能成功触发。原因

onclick 相当于 在某一元素上触发了 onmousedown(即鼠标按下)后 仍然在该元素 上 触发了onmouseup(鼠标按键弹起)才触发 onclick; 
有以下情况: 对于某元素A 绑定了click事件 并同时对另外的元素B 绑定onblur事件, 这时候,当在A上mousedown后,即触发了B元素的onblur事件,该事件函数执行后的效果是改变了DOM结构,使得鼠标已经不在在元素A之上。 这时鼠标任然没有mouseup ,在mouseup之后,以为会触发click事件,实际上却不能触发。


例子
 

<p><span id="mytext"></span></p>
<input type="text" onblur="wtext()">
<input type="button" onclick="return check_form()" value="submit">
<script>
function wtext() {
    document.getElementById('mytext').innerHTML='this is my text';
}
function check_form() {
        alert('good');
}
</script>

这里的onclick没有被执行,所以不会弹出'good',原因是触发onblur时,增加了文字,导致DOM结构被改变。
只要使DOM结构不变,就能解决这个问题,看案例

<p>为了保持DOM结构而增加的文字 <span id="mytext"></span></p>
<input type="text" onblur="wtext()">
<input type="button" onclick="return check_form()" value="submit">
<script>
function wtext() {
    document.getElementById('mytext').innerHTML='this is my text';
}
function check_form() {
        alert('good');
}
</script>

如果需要先执行clik后执行onblur的话,可以用 onmousedown,因为是先触发按下鼠标事件,再触发onblur事件,最后触发松开鼠标事件

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
function foo1()
{
     //$("div").delay(400).hide();
     $('p').text($('p').text()+"input,");
}
function foo2()
{
     //alert("li");
     $('p').text($('p').text()+"li,");
}
</script>
<input type="text" onblur="javascript:foo1();">
</input>
<div>
<li onmousedown="javascript:foo2();">AAAAA</li>
<li onmousedown="javascript:foo2();">BBBBB</li>
<li onmousedown="javascript:foo2();">CCCCC</li>
</div>
<p></p>

欢迎转载,但请保留原文地址 http://www.sjyhome.com/javascript/1328.html

回复(0)