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

Posted 2023-05-08

【中文标题】ASP.Net 用户控件悬停导致点击

【英文标题】：ASP.Net User Control hover causing click

【发布时间】：2016-09-13 23:17:47

【问题描述】：

我正在开发一个 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');");

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

任何帮助将不胜感激。

谢谢。

【问题讨论】：

在我看来，你应该不让应用程序做这样的事情。如果用户想点击链接/链接按钮，让他/她点击它。就我个人而言，当应用程序执行这些技巧时，我觉得很烦人。我应该能够将鼠标放在我想要的任何地方，而不会让应用程序猜测我可能想要点击链接......无论如何，只是我的意见......

我同意我们不应该自动为用户点击内容。在这种情况下，我真正需要做的是让悬停事件导致一些服务器端处理，以便我可以检索数据并在弹出窗口中显示它。因此，LinkBut​​ton 与其说是一个用户可点击的功能（尽管确实如此），不如说是一个悬停目标，而不是其他任何东西。

【参考方案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，无论是从服务器（我根本不喜欢）还是只是在客户端上执行并正确地将客户端与服务器端分开，但不要尝试将两者混合。

【参考方案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 的建议。

【参考方案3】：

确保您使用 jQuery 注册事件：

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

【讨论】：

那行不通，当悬停事件触发时，您正在分配 te hoverIntent。您根本没有利用 hoverIntent，而且您还多次附加事件。

哦，你说得对，我只是想强调一下jQuery的用法，你的回答是完整的。