none
如果javascript中有document.body.appendChild(控件);的话,那么在该控件中设置服务器端Click事件失效。 RRS feed

  • 问题

  • 如下代码,主要就看加粗部分。
    function show_Win(div_Win, tr_Title, id) {
        var iWidth = document.documentElement.clientWidth;
        var iHeight = document.documentElement.clientHeight;
        var bgObj = document.createElement("iframe");
        bgObj.setAttribute("id", "div_Bg");
        bgObj.style.position = "absolute";
        bgObj.style.left = "0px";
        bgObj.style.top = "0px";
        bgObj.style.width = iWidth + "px";
        bgObj.style.height = Math.max(document.body.clientHeight, iHeight) + "px";
        bgObj.style.backgroundColor = "#000000";
        bgObj.style.filter = "Alpha(Opacity = 60)";
        bgObj.style.Opacity = 0.6;
        bgObj.style.zIndex = "10000";
        document.body.appendChild(bgObj);
        var msgObj = document.getElementById(div_Win);
        msgObj.style.display = '';
        msgObj.style.position = "absolute";
        msgObj.style.top = (iHeight - msgObj.offsetHeight) / 2 + "px";
        msgObj.style.left = (iWidth - msgObj.offsetWidth) / 2 + "px";
        msgObj.style.backgroundColor = "#FFFFFF";
        msgObj.style.border = "double 4px #808080";
        msgObj.style.zIndex = "10001";
        document.body.appendChild(msgObj);//这句必须有,如果没有的话再有模板页的情况下及时弹出层的index>背景层的index,弹出层仍然会被背景层遮盖(ie8下没问题,ie6下有问题,这个企业因为某些原因必须用ie6),但是如果设置了这行,那么服务器端的click事件就会失效。

        var moveX = 0;
        var moveY = 0;
        var moveTop = 0;
        var moveLeft = 0;
        var moveable = false;
        var docMouseMoveEvent = document.onmousemove;
        var docMouseUpEvent = document.onmouseup;
        var titleBar = document.getElementById(tr_Title);
        titleBar.style.cssText = "cursor:move;";
        titleBar.onmousedown = function() {
            var evt = getEvent();
            moveable = true;
            moveX = event.clientX;
            moveY = evt.clientY;
            moveTop = parseInt(msgObj.style.top);
            moveLeft = parseInt(msgObj.style.left);
            document.onmousemove = function() {
                if (moveable) {
                    var evt = getEvent();
                    var x = moveLeft + evt.clientX - moveX;
                    var y = moveTop + evt.clientY - moveY;
                    if (x > 0 && (x + msgObj.offsetWidth < iWidth) && y > 0 && (y + msgObj.offsetHeight < iHeight)) {
                        msgObj.style.left = x + "px";
                        msgObj.style.top = y + "px";
                    }
                }
            };
            document.onmouseup = function() {
                if (moveable) {
                    document.onmousemove = docMouseMoveEvent;
                    document.onmouseup = docMouseUpEvent;
                    moveable = false;
                    moveX = 0;
                    moveY = 0;
                    moveTop = 0;
                    moveLeft = 0;
                }
            };
        }
    }
     <div id="div_Add" style="display: none;">//这是那个弹出层
            <table id="tb" cellpadding="2" cellspacing="0">
                <tr id="title_Bar">
                    <td style="width: 400px; text-align: center;">
                        违章记分标准录入
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txt_Name" runat="server" Rows="1" TextMode="MultiLine" Width="99%"
                            Style="overflow-y: auto;" onpropertychange='auto_Height(this)' onfocus='auto_Height(this)'
                            BorderWidth="0"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btn_Confirm" runat="server" Text="录入" OnClick="btn_Confirm_Click" />//这是那个服务器端的控件,就是这个Onclick事件失效的
                        <input type="button" id="btn_Fh" value="返回"
                            onclick="close_Win('div_Add')" />
                    </td>
                </tr>
            </table>
        </div>

    protected void btn_Confirm_Click(object sender, EventArgs e)
            {
    //就是不执行里面的东西,气死个人,请各位帮帮我吧。
            }

    2010年2月21日 16:21

答案

  • 因为你移动了控件在控件树中的位置,所以服务器端事件无法正常触发。通过 CSS 解决问题,同时保证控件树不被改变,这样的做法是正确的。
    Microsoft ASP.NET MVP
    2010年2月28日 11:22
    版主

全部回复

  • 问题找到了,因为模板页中有一个div 的css属性为position:relative;现在我把问题简化成以下代码:
    各位只看黑体部分即可,如果把position:absolute去掉,那么在ie6~ie8下都可以正常显示,如果把position:relative加上那么在ie6下遮罩层会遮盖所有层,不管z-index如何,我不知道原因,一点点试出来的,求教各位高人原因,以下代码直接复制即可执行。(注意要在ie6下做实验,因为ie8下是正常的)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <script type="text/javascript">
            function show_Win(div_Win, tr_Title, id) {
                var iWidth = document.documentElement.clientWidth;
                var iHeight = document.documentElement.clientHeight;
                var bgObj = document.createElement("iframe");
                bgObj.setAttribute("id", "div_Bg");
                bgObj.style.position = "absolute";
                bgObj.style.left = "0px";
                bgObj.style.top = "0px";
                bgObj.style.width = iWidth + "px";
                bgObj.style.height = Math.max(document.body.clientHeight, iHeight) + "px";
                bgObj.style.backgroundColor = "#000000";
                bgObj.style.filter = "Alpha(Opacity = 60)";
                bgObj.style.Opacity = 0.6;
                bgObj.style.zIndex = "1";
                document.body.appendChild(bgObj);

                var msgObj = document.getElementById(div_Win);
                msgObj.style.display = '';
                msgObj.style.position = "absolute";
                msgObj.style.top = (iHeight - msgObj.offsetHeight) / 2 + "px";
                msgObj.style.left = (iWidth - msgObj.offsetWidth) / 2 + "px";
                msgObj.style.backgroundColor = "#FFFFFF";
                msgObj.style.border = "double 4px #808080";
                msgObj.style.zIndex = "99999";


                var moveX = 0;
                var moveY = 0;
                var moveTop = 0;
                var moveLeft = 0;
                var moveable = false;
                var docMouseMoveEvent = document.onmousemove;
                var docMouseUpEvent = document.onmouseup;
                var titleBar = document.getElementById(tr_Title);
                titleBar.style.cssText = "cursor:move;";
                titleBar.onmousedown = function() {
                    var evt = getEvent();
                    moveable = true;
                    moveX = event.clientX;
                    moveY = evt.clientY;
                    moveTop = parseInt(msgObj.style.top);
                    moveLeft = parseInt(msgObj.style.left);
                    document.onmousemove = function() {
                        if (moveable) {
                            var evt = getEvent();
                            var x = moveLeft + evt.clientX - moveX;
                            var y = moveTop + evt.clientY - moveY;
                            if (x > 0 && (x + msgObj.offsetWidth < iWidth) && y > 0 && (y +
    msgObj.offsetHeight < iHeight)) {
                                msgObj.style.left = x + "px";
                                msgObj.style.top = y + "px";
                            }
                        }
                    };
                    document.onmouseup = function() {
                        if (moveable) {
                            document.onmousemove = docMouseMoveEvent;
                            document.onmouseup = docMouseUpEvent;
                            moveable = false;
                            moveX = 0;
                            moveY = 0;
                            moveTop = 0;
                            moveLeft = 0;
                        }
                    };
                }
            }


            function getEvent() {
                return window.event || arguments.callee.caller.arguments[0];
            }
            function close_Win(div_Win) {
                var div_Bg = document.getElementById("div_Bg");
                var div_Add = document.getElementById(div_Win);
                document.body.removeChild(div_Bg);
                div_Add.style.display = 'none';
            }
            function StringToArray(str, substr) {
                var arrTmp = new Array();
                if (substr == "") {
                    arrTmp.push(str);
                    return arrTmp;
                }
                var i = 0, j = 0, k = str.length;
                while (i < k) {
                    j = str.indexOf(substr, i);
                    if (j != -1) {
                        if (str.substring(i, j) != "") { arrTmp.push(str.substring(i, j)); }
                        i = j + 1;
                    } else {
                        if (str.substring(i, k) != "") { arrTmp.push(str.substring(i, k)); }
                        i = k;
                    }
                }
                return arrTmp;
            }
        </script>

    </head>
    <body>
        <input type="button" id="btn" onclick="show_Win('add_Win','title_Bar')" value="弹出" />
        <div style="position: relative; margin: 0px 0px 0px 14%; padding: 0px; border: solid 2px blue;
            width: 500px; height: 600px;">
            <div id="add_Win" style="display: none; position: absolute; z-index: 3; width: 300px;
                height: 300px; border: solid 10px blue;">
                <table>
                    <tr>
                        <td id="title_Bar">
                            标题
                        </td>
                    </tr>
                    <tr>
                        <td>
                            内容
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>

    2010年2月22日 12:38
  • 因为你移动了控件在控件树中的位置,所以服务器端事件无法正常触发。通过 CSS 解决问题,同时保证控件树不被改变,这样的做法是正确的。
    Microsoft ASP.NET MVP
    2010年2月28日 11:22
    版主