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

Question

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

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

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

搜索使我找到了 hoverIntent jquery 实现，但我有一段时间想弄清楚如何让它正常工作。我（诚然错误）的理解是我必须将 javascript 附加到 .cs 文件中的 LinkBut​​ton ，但我无法弄清楚如何将其正确添加到链接按钮。我试过用这样的警告框进行测试：

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

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

任何帮助将不胜感激。

谢谢。

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

因此，在查看并尝试了这些建议后，我找到了一个优雅的解决方案，可以在客户端完成所有工作。这是我所做的： 首先，在 .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'});");