IT技术互动交流平台

OnClick事件return false在IE7/8无效

作者:黑暗執行緒  发布日期:2013-01-05 19:16:23

某个网页出现<input type="submit"> onclick事件return false;却无法阻止Postback的情况,进一步测试发现问题只出现在IE7/8,窗体在IE9则如预期会因onclick事件回传false取消Postback。

使用删去法,将网页元素及程序一点一点移除并反复测试,终于查出问题所在,答案有点离奇,竟是因为网页使用了jQuery BlockUI的$(element).block()造成异常。深入jquery.blockUI.js原始码,更进一步锁定问题来源,网页所用的jquery.blockUI 2.07版(经测试改用2.5.4新版时倒无此问题),于设定block层时会透过以下程序代码挂载document.onclick事件:

// bind anchors and inputs for mouse and key events
var events = 'mousedown mouseup keydown keypress click';
b ? $(document).bind(events, opts, handler) : $(document).unbind(events, handler);

而在handler函数最后一行为:

// allow events for content that is not being blocked
return $(e.target).parents().children().filter('div.blockUI').length == 0;


推敲其用意是在全网页被.blockUI()遮蔽时,故意传回false以取消对document的所有鼠标及按键操作! 在这个案例中,使用了block(),handler事件会生效,但由于非blockUI(),故document.onclick时预期将return true; 透过IE Dev Tools侦错程序代码,在按下送出钮时,<input type="submit"> onclick事件return false,document.onclick却return true,同一个click动作出现两个不同的return值,故有可能是IE7/8/9对此一情境的行为不同所致。

整理成一个重现问题的极精简范例:

 

<%@Page Language="C#"%>
<script runat="server">
    void Page_Load(object sender, EventArgs e) 
    {
        if (IsPostBack) {
            Response.Write("PostBack!");
            Response.End();
        }
    }
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Return False</title>
</head>
<body onclick="return true;">
    <form id="form1" method="post" runat="server">
        <input type="submit" value="Submit"  onclick="return false;"/>
    </form>
</body>
</html>

这个网页在使用IE7/8兼容模式检视时,按下Submit钮,即便onclick="return false"仍会触发PostBack。使用IE9/Chrome/Firefox则不会PostBack,算是验证了此一行为差异。

一个简单的解决方案是修改送出钮onclick事件,除了return false再加上event.returnValue = false,如此即可在IE7/8/9/Chrome/Firefox均顺利运行: www.it165.net

<input type="submit" value="Submit"  onclick="if (event) event.returnValue = false; return false;"/>

 

延伸阅读:

Tag标签: OnClick事件  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规