Question

我正在开发一个ASP.NET webforms应用程序。在我的页面上，我有一个包含LinkButton的转发器。当用户将鼠标悬停在链接按钮上时，我需要触发LinkButton的Click（）动作。我可以使用mouseover事件触发点击。在.cs文件中，我添加了onmouseover事件，如下所示：

previewButton.Attributes.Add("onmouseover", "document.getElementById('" + previewButton.ClientID + "').click();");

问题当然是即使用户只是将鼠标悬停在链接按钮上，也会立即触发click事件。这很烦人，所以我一直试图让它在悬停事件而不是鼠标悬停事件上工作。

搜索引导我进入hoverIntent jquery实现，但是我正在考虑如何让它正常工作。我的（无可否认的）理解是我必须将javascript附加到.cs文件中的LinkButton，但我无法弄清楚如何将其正确添加到linkbutton。我尝试使用这样的警告框进行测试：

previewButton.Attributes.Add("hover", "document.getElementById('" + previewButton.ClientID + "').hoverIntent(function(){alert('mouseover');}function(){alert('mouseout'});");

但是当我将鼠标悬停在链接上时，警报从未显示。

非常感谢任何帮助。

感谢。

Answer 1

如果你正在使用hoverIntent插件，就像它在http://s000.tinyupload.com/index.php?file_id=05961025831018336372上指定的那样，你应该使用hoverIntent方法。现在问题是，您将内联事件附加到html元素中，因为您需要使用jQuery附加事件，所以不支持这些事件。

尝试在RegisterStartupScript事件中使用Page_Load：

String csname1 = "hover1";
Type cstype = this.GetType();

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
    string script = "<script>$('#" + previewButton.ClientID + "').hoverIntent(function () { $('#" + previewButton.ClientID + "').click(); });</script>";

    cs.RegisterStartupScript(cstype, csname1, script);
}

这样你就可以通过jQuery附加事件了。请注意本机HTML事件（您分配的内容）与jQuery事件（如hoverIntent。

之间的区别

个人意见

我不喜欢服务器中的ASP.NET WebForms javascript实现，因为它会从您包含的脚本中创建捆绑包。如果你试图在服务器和客户端中同时包含内联代码或script标签，事情开始变得讨厌，而且很难知道添加了哪些顺序脚本，你可能会最终做了两次加载jQuery或类似的东西。

我的建议是选择如何从服务器（我根本不喜欢）中包含您的javascript，或者只是在客户端上进行操作并将客户端从服务器端正确划分，但不要＃39;尝试混合两者。

Answer 2

因此，在查看了建议并尝试了之后，我找到了一个优雅的解决方案，可以在客户端完成所有工作。这就是我的所作所为：首先，在.aspx页面中，我为每个HyperLink控件分配了一个css类：

<asp:LinkButton ID="PreviewButton" runat="server" Text="preview" OnClick="PreviewButton_Click" CssClass="previewLink"></asp:LinkButton>

然后我添加了一个附加到该类的每个项目的javascript函数：

<script type="text/javascript">
    $(function () {
        var btn = $('.previewLink');
        btn.hoverIntent(function (e) {
            e.target.click();
        }, function () { });
    });
</script>

确定我有hoverintent插件后：

<script src='<%= ResolveUrl("~/Scripts/jquery.hoverintent.minified.js") %>' type="text/javascript"></script>

它按我期望的方式工作。当我将鼠标悬停在链接上时，我的OnClick函数被调用，应该弹出的预览显示就像我想要的那样。

现在我唯一的问题是只有第一个悬停工作 - 其余的都失败了。所以我要解决这个问题。

谢谢！感谢TheBosZ的建议。

Answer 3

确保使用jQuery注册事件：

previewButton.Attributes.Add("hover", "$('#" + previewButton.ClientID + "').hoverIntent(function(){alert('mouseover');}function(){alert('mouseout'});");

ASP.Net用户控制悬停导致点击

3 个答案: