DukeBrymin DukeBrymin - 1 year ago 73
Javascript Question

ASP.Net User Control hover causing click

I am working on an ASP.NET webforms application. On my page I have a repeater that includes a LinkButton. I have a need to trigger a LinkButton's Click() action when a user hovers over the linkbutton. I can trigger the click using the mouseover event. In the .cs file I add the onmouseover event like this:

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

The problem, of course, is that the click event is triggered immediately, even if the user just brushes the mouse over the linkbutton. This is rather annoying, so I've been trying to get this to work on a hover event rather than a mouseover event.

Searching led me to the hoverIntent jquery implementation, but I'm having a bear of a time figuring out how to get it to work correctly. My (admittedly faulty) understanding was that I had to attach the javascript to the LinkButton in the .cs file, but I haven't been able to figure out how to add that correctly to the linkbutton. I've tried testing with alert boxes like this:

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

but the alerts never show when I hover over the link.

Any help would be tremendously appreciated.


Answer Source

So, after looking through the suggestions and trying them out, I was able to find an elegant solution that does all its work client-side. Here's what I did: First, in the .aspx page, I assigned a css class to each of my HyperLink controls:

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

Then I added a javascript function that attached to each item of that class:

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

After making sure that I had the hoverintent plugin:

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

It works the way I expect it to. When I hover over the link, my OnClick function gets called and the preview that is supposed to pop up shows just like I want it to.

Now my only problem is that only the first hover works--the rest of them fail. So I'm off to troubleshoot that.

Thanks! And thanks to TheBosZ for the suggestions.