asp.net - 访问 offsetParent 时 IE 6/7 "Unspecified Error"错误是否有解决方法-6ren

asp.net - 访问 offsetParent 时 IE 6/7 "Unspecified Error"错误是否有解决方法

转载作者：行者123 更新时间：2023-12-03 22:37:42

我在一个简单的 ASP.NET 概念验证应用程序中使用 jQuery UI 的可拖放库。此页面使用 ASP.NET AJAX UpdatePanel 进行部分页面更新。该页面允许用户将一个项目放入垃圾桶 div 中，这将调用一个回发，从数据库中删除一条记录，然后重新绑定(bind)该项目所在的列表(和其他控件)。所有这些元素(可拖动项和垃圾桶 div)都位于 ASP.NET UpdatePanel 内。

这是拖放初始化脚本:

    function initDragging()
    {
        $(".person").draggable({helper:'clone'});
        $("#trashcan").droppable({
            accept: '.person',
            tolerance: 'pointer',
            hoverClass: 'trashcan-hover',
            activeClass: 'trashcan-active',
            drop: onTrashCanned
        });
    }

    $(document).ready(function(){
        initDragging();

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function()
        {
            initDragging();
        });
    });

    function onTrashCanned(e,ui)
    {
        var id = $('input[id$=hidID]', ui.draggable).val();
        if (id != undefined)
        {
            $('#hidTrashcanID').val(id);
            __doPostBack('btnTrashcan','');
        }

    }

当页面回发并部分更新 UpdatePanel 的内容时，我重新绑定(bind)可拖动对象和可放置对象。然后，当我用光标抓取可拖动对象时，我收到“htmlfile:未指定错误”。异常(exception)。我可以通过将 elem.offsetParent 替换为对我编写的此函数的调用来解决 jQuery 库中的此问题:

function IESafeOffsetParent(elem)
{
    try
    {
        return elem.offsetParent;
    }
    catch(e)
    {        
        return document.body;
    }
}

我还必须避免调用 elem.getBoundingClientRect()，因为它会引发相同的错误。对于那些感兴趣的人，我只需在 Dimensions Plugin 中的 jQuery.fn.offset 函数中进行这些更改。 .

我的问题是:

虽然这可行，但是否有更好的方法(更干净；更好的性能；无需修改 jQuery 库)来解决这个问题？
如果不是，当我将来更新 jQuery 库时，管理保持更改同步的最佳方法是什么？例如，我可以将库扩展到其他地方，而不仅仅是内联到从 jQuery 网站下载的文件中。

更新:

@some 它不是公开访问的，但我会看看 SO 是否会让我将相关代码发布到这个答案中。只需创建一个 ASP.NET Web 应用程序(将其命名为 DragAndDrop)并创建这些文件。不要忘记将 Complex.aspx 设置为起始页。您还需要下载jQuery UI drag and drop plug in以及jQuery core

复杂.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex.aspx.cs" Inherits="DragAndDrop.Complex" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDragging()
        {
            $(".person").draggable({helper:'clone'});
            $("#trashcan").droppable({
                accept: '.person',
                tolerance: 'pointer',
                hoverClass: 'trashcan-hover',
                activeClass: 'trashcan-active',
                drop: onTrashCanned
            });
        }

        $(document).ready(function(){
            initDragging();

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(function()
            {
                initDragging();
            });
        });

        function onTrashCanned(e,ui)
        {
            var id = $('input[id$=hidID]', ui.draggable).val();
            if (id != undefined)
            {
                $('#hidTrashcanID').val(id);
                __doPostBack('btnTrashcan','');
            }

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="updContent" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:LinkButton ID="btnTrashcan" Text="trashcan" runat="server" CommandName="trashcan" 
            onclick="btnTrashcan_Click" style="display:none;"></asp:LinkButton>
        <input type="hidden" id="hidTrashcanID" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
        <table>
            <tr>
                <td style="width: 300px;">
                    <asp:DataList ID="lstAllPeople" runat="server" DataSourceID="odsAllPeople"
                        DataKeyField="ID">
                        <ItemTemplate>
                            <div class="person">
                                <asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' />
                                Name:
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />
                                <br />
                                <br />
                            </div>
                        </ItemTemplate>
                    </asp:DataList>
                    <asp:ObjectDataSource ID="odsAllPeople" runat="server" SelectMethod="SelectAllPeople" 
                        TypeName="DragAndDrop.Complex+DataAccess" 
                        onselecting="odsAllPeople_Selecting">
                        <SelectParameters>
                            <asp:Parameter Name="filter" Type="Object" />
                        </SelectParameters>
                    </asp:ObjectDataSource>
                </td>
                <td style="width: 300px;vertical-align:top;">
                    <div id="trashcan">
                        drop here to delete
                    </div>
                    <asp:DataList ID="lstPeopleToDelete" runat="server" 
                        DataSourceID="odsPeopleToDelete">
                        <ItemTemplate>
                            ID:
                            <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                            <br />
                            Name:
                            <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                            <br />
                            <br />
                        </ItemTemplate>
                    </asp:DataList>
                    <asp:ObjectDataSource ID="odsPeopleToDelete" runat="server" 
                        onselecting="odsPeopleToDelete_Selecting" SelectMethod="GetDeleteList" 
                        TypeName="DragAndDrop.Complex+DataAccess">
                        <SelectParameters>
                            <asp:Parameter Name="list" Type="Object" />
                        </SelectParameters>
                    </asp:ObjectDataSource>
                </td>
            </tr>
        </table>    
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Complex.aspx.cs

namespace DragAndDrop
{
    public partial class Complex : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected List<int> DeleteList
        {
            get
            {
                if (ViewState["dl"] == null)
                {
                    List<int> dl = new List<int>();
                    ViewState["dl"] = dl;

                    return dl;
                }
                else
                {
                    return (List<int>)ViewState["dl"];
                }
            }
        }

        public class DataAccess
        {
            public IEnumerable<Person> SelectAllPeople(IEnumerable<int> filter)
            {
                return Database.SelectAll().Where(p => !filter.Contains(p.ID));
            }

            public IEnumerable<Person> GetDeleteList(IEnumerable<int> list)
            {
                return Database.SelectAll().Where(p => list.Contains(p.ID));
            }
        }

        protected void odsAllPeople_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
        {
            e.InputParameters["filter"] = this.DeleteList;
        }

        protected void odsPeopleToDelete_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
        {
            e.InputParameters["list"] = this.DeleteList;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            foreach (int id in DeleteList)
            {
                Database.DeletePerson(id);
            }

            DeleteList.Clear();
            lstAllPeople.DataBind();
            lstPeopleToDelete.DataBind();
        }

        protected void btnTrashcan_Click(object sender, EventArgs e)
        {
            int id = int.Parse(hidTrashcanID.Value);
            DeleteList.Add(id);
            lstAllPeople.DataBind();
            lstPeopleToDelete.DataBind();
        }
    }
}

数据库.cs

namespace DragAndDrop
{
    public static class Database
    {
        private static Dictionary<int, Person> _people = new Dictionary<int,Person>();
        static Database()
        {
            Person[] people = new Person[]
            {
                new Person("Chad")
                , new Person("Carrie")
                , new Person("Richard")
                , new Person("Ron")
            };
            foreach (Person p in people)
            {
                _people.Add(p.ID, p);
            }
        }

        public static IEnumerable<Person> SelectAll()
        {
            return _people.Values;
        }

        public static void DeletePerson(int id)
        {
            if (_people.ContainsKey(id))
            {
                _people.Remove(id);
            }
        }

        public static Person CreatePerson(string name)
        {
            Person p = new Person(name);
            _people.Add(p.ID, p);

            return p;
        }
    }

    public class Person
    {
        private static int _curID = 1;
        public int ID { get; set; }
        public string Name { get; set; }
        public Person()
        {
            ID = _curID++;
        }

        public Person(string name)
            : this()
        {
            Name = name;
        }
    }
}

最佳答案

@arilanto - 我在 jquery 脚本之后包含此脚本。从性能角度来看，这不是最好的解决方案，但它是一个快速简单的解决方案。

function IESafeOffsetParent(elem)
{
    try
    {
       return elem.offsetParent;
    }
    catch(e)
    {        
      return document.body;
    }
}

// The Offset Method
// Originally By Brandon Aaron, part of the Dimension Plugin
// http://jquery.com/plugins/project/dimensions
jQuery.fn.offset = function() {
/// <summary>
///     Gets the current offset of the first matched element relative to the viewport.
/// </summary>
/// <returns type="Object">An object with two Integer properties, 'top' and 'left'.</returns>

var left = 0, top = 0, elem = this[0], results;

if ( elem ) with ( jQuery.browser ) {
    var parent     = elem.parentNode,
        offsetChild  = elem,
        offsetParent = IESafeOffsetParent(elem),
        doc       = elem.ownerDocument,
        safari2   = safari && parseInt(version) < 522 && !/adobeair/i.test(userAgent),
        css       = jQuery.curCSS,
        fixed       = css(elem, "position") == "fixed";

    // Use getBoundingClientRect if available
    if (false && elem.getBoundingClientRect) {
        var box = elem.getBoundingClientRect();

        // Add the document scroll offsets
        add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
            box.top  + Math.max(doc.documentElement.scrollTop,  doc.body.scrollTop));

        // IE adds the HTML element's border, by default it is medium which is 2px
        // IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; }
        // IE 7 standards mode, the border is always 2px
        // This border/offset is typically represented by the clientLeft and clientTop properties
        // However, in IE6 and 7 quirks mode the clientLeft and clientTop properties are not updated when overwriting it via CSS
        // Therefore this method will be off by 2px in IE while in quirksmode
        add( -doc.documentElement.clientLeft, -doc.documentElement.clientTop );

    // Otherwise loop through the offsetParents and parentNodes
    } else {

        // Initial element offsets
        add( elem.offsetLeft, elem.offsetTop );

        // Get parent offsets
        while ( offsetParent ) {
            // Add offsetParent offsets
            add( offsetParent.offsetLeft, offsetParent.offsetTop );

            // Mozilla and Safari > 2 does not include the border on offset parents
            // However Mozilla adds the border for table or table cells
            if ( mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName) || safari && !safari2 )
                border( offsetParent );

            // Add the document scroll offsets if position is fixed on any offsetParent
            if ( !fixed && css(offsetParent, "position") == "fixed" )
                fixed = true;

            // Set offsetChild to previous offsetParent unless it is the body element
            offsetChild  = /^body$/i.test(offsetParent.tagName) ? offsetChild : offsetParent;
            // Get next offsetParent
            offsetParent = offsetParent.offsetParent;
        }

        // Get parent scroll offsets
        while ( parent && parent.tagName && !/^body|html$/i.test(parent.tagName) ) {
            // Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug
            if ( !/^inline|table.*$/i.test(css(parent, "display")) )
                // Subtract parent scroll offsets
                add( -parent.scrollLeft, -parent.scrollTop );

            // Mozilla does not add the border for a parent that has overflow != visible
            if ( mozilla && css(parent, "overflow") != "visible" )
                border( parent );

            // Get next parent
            parent = parent.parentNode;
        }

        // Safari <= 2 doubles body offsets with a fixed position element/offsetParent or absolutely positioned offsetChild
        // Mozilla doubles body offsets with a non-absolutely positioned offsetChild
        if ( (safari2 && (fixed || css(offsetChild, "position") == "absolute")) ||
            (mozilla && css(offsetChild, "position") != "absolute") )
                add( -doc.body.offsetLeft, -doc.body.offsetTop );

        // Add the document scroll offsets if position is fixed
        if ( fixed )
            add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
                Math.max(doc.documentElement.scrollTop,  doc.body.scrollTop));
    }

    // Return an object with top and left properties
    results = { top: top, left: left };
}

function border(elem) {
    /// <summary>
    ///     This method is internal.
    /// </summary>
    /// <private />
    add( jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true) );
}

function add(l, t) {
    /// <summary>
    ///     This method is internal.
    /// </summary>
    /// <private />
    left += parseInt(l, 10) || 0;
    top += parseInt(t, 10) || 0;
}

return results;
};

关于asp.net - 访问 offsetParent 时 IE 6/7 "Unspecified Error"错误是否有解决方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/371468/

文章推荐： Scala Slick Lazy Fetch

文章推荐： google-chrome - 我如何专门检测 Chromium 与 Chrome？

文章推荐： javascript - sequelize.query() 抛出未处理的拒绝

javascript - php 访问 mqsql 或 html 访问 json 或 html 访问 xml ？哪个更快？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
powershell - API 访问 PowerShell Web 访问？
PowerShell Web Access 允许您通过 Web 浏览器运行 PowerShell cmdlet。它显示了一个基于 Web 的控制台窗口。有没有办法运行 cmdlet 而无需在控制台窗
c# - 如何使用应用程序级身份验证/访问 token 访问 Sharepoint 文件？
我尝试在无需用户登录的情况下访问 Sharepoint 文件。我可以通过以下任一方式获取访问 token 方法一: var client = new RestClient("https://logi
soap - 使用 OAuth 访问 token 访问 SOAP 服务？
我目前正在尝试通过 Chrome 扩展程序访问 Google 服务。我的理解是，对于 JS 应用程序，Google 首选的身份验证机制是 OAuth。我的应用目前已成功通过 OAuth 向服务进行身份
C++ - 允许通过基类(接口(interface))访问，禁止通过派生类(具体实现)访问？
假设我有纯抽象类 IHandler 和派生自它的类: class IHandler { public: virtual int process_input(char input) = 0; };
css - 可以通过 URL 访问 CSS 文件，但不能从 HTML 访问
我有一个带有 ThymeLeaf 和 Dojo 的 Spring 应用程序，这给我带来了问题。当我从我的 HTML 文件中引用 CSS 文件时，它们在 Firebug 中显示为中止。但是，当我通过在地
javascript - 为什么我可以用 [val] 访问 js 对象，但不能用 .val 访问？
这个问题已经有答案了: JavaScript property access: dot notation vs. brackets? (17 个回答) 已关闭 6 年前。为什么这不起作用？ func
.htaccess - 仅允许通过 http 访问 robot.txt，其他通过 https 访问
我想将所有流量重定向到 https，只有 robot.txt 应该可以通过 http 访问。是否可以为 robot.txt 文件创建异常(exception)？我的 .htaccess 文件: R
oauth-2.0 - 无法使用有效的 oauth2 访问 token 访问 Linkedin 个人资料
我遇到了 LinkedIn OAuth2: "Unable to verify access token" 中描述的相同问题;但是，那里描述的解决方案并不能解决我的问题。我能够成功请求访问 toke
Docker 容器不能通过 localhost 访问，但可以通过 127.0.0.1 访问
问题我有一个暴露给 *:8080 的 Docker 服务容器. 我无法通过 localhost:8080 访问容器. Chrome /curl无限期挂断。但是如果我使用任何其他本地IP，我就可以访
python - 使用 OAuth 2.0 访问 token 访问 Gmail Imap
我正在使用 Google 的 Oauth 2.0 来获取用户的 access_token，但我不知道如何将它与 imaplib 一起使用来访问收件箱。最佳答案下面是带有 oauth 2.0 的 I
curl - 可以从 curl 访问 docker 服务，但不能从 postman/chrome 访问
我正在做 docker 入门指南:https://docs.docker.com/get-started/part3/#recap-and-cheat-sheet-optional docker-co
azure - 带有 Nginx 的 AKS 无法通过 IP 访问，只能通过 DNS 访问
我正在尝试使用静态 IP 在 AKS 上创建一个 Web 应用程序，自然找到了一个带有 Nginx ingress controller in Azure's documentation 的解决方案。
javascript - 为什么可以将 'module.exports' 作为 'exports' 访问，但不能使用 'module.id' 访问？
这是我在名为 foo.js 的文件中的代码。 console.log('module.exports:', module.exports) console.log('module.id:', modu
amazon-web-services - aws 访问 key ID 和 secret 访问 key
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
xcode - 从 iOS 5 访问 Twitter 时 OAuth 访问 token 失败
我正在使用 MGTwitterEngine"将 twitter 集成到我的应用程序中。它在 iOS 4.2 上运行良好。当我尝试从任何 iOS 5 设备访问 twitter 时，我遇到了身份验证 to
amazon-web-services - aws 访问 key ID 和 secret 访问 key
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
ios - 如果 Facebook 访问 token 过期，会生成新的 Facebook 访问 token 吗？
我正在使用以下 API 列出我的 Facebook 好友。 https://graph.facebook.com/me/friends?access_token= ??? 我想知道访问 token 过
google-app-engine - 尝试使用 API key 访问 BigQuery 时出错(简单 API 访问)
401 Unauthorized - Show headers - { "error": { "errors": [ { "domain": "global", "reas
django - 从 heroku 访问 s3 内容时，AWS 访问 key 显示在浏览器 url 中
我已经将我的 django 应用程序部署到 heroku 并使用 Amazon s3 存储桶存储静态文件，我发现从 s3 存储桶到 heroku 获取数据没有问题。但是，当我测试查看内容存储位置时，除

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

asp.net - 访问 offsetParent 时 IE 6/7 "Unspecified Error"错误是否有解决方法