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

Question

我正在开发 ASP.NET 网络表单应用程序。在我的页面上，我有一个包含 LinkButton 的转发器。当用户将鼠标悬停在 link 按钮上时，我需要触发 LinkButton 的 Click() 操作。我可以使用鼠标悬停事件触发点击。在 .cs 文件中，我添加了这样的 onmouseover 事件：

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

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

搜索让我找到了 hoverIntent jquery 实现，但我花了很长时间才弄清楚如何让它正常工作。我（公认的错误）理解是我必须将 javascript 附加到 .cs 文件中的 LinkButton，但我一直无法弄清楚如何将其正确添加到 link 按钮.我试过用这样的警告框进行测试：

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

但是当我将鼠标悬停在 link 上时，警报永远不会显示。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

如果您正在使用 hoverIntent 插件，正如它在 it's documentation 上指定的那样，您应该使用 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，要么从服务器（我根本不喜欢），要么只在客户端执行，并正确地将客户端与服务器分开-一边，但不要试图将两者混合。

Answer 2

确保您使用 jQuery:

注册活动

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

Answer 3

因此，在仔细阅读这些建议并进行尝试后，我找到了一个优雅的解决方案，可以在客户端完成所有工作。这是我所做的：首先，在 .aspx 页面中，我为每个 HyperLink 控件分配了一个 css class：

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

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

<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>

它按我期望的方式工作。当我将鼠标悬停在 link 上时，系统会调用我的 OnClick 函数，并且应该弹出的预览会按我想要的方式显示。

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

谢谢！并感谢 TheBosZ 的建议。

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

ASP.Net User Control hover causing click

c#

asp.net

jquery

webforms