使用 Chrome 并直接单击图像时，带有 Img 元素的自定义 ASP 按钮不会触发服务器端事件

Question

我有一个自定义 ASP.NET 按钮，里面有一个图像元素（和一个 asp 文字）。我想要一个带有图像和文本的按钮，但我不想使用 CSS，因为使用 CSS 设置背景图像似乎会删除所有标准按钮格式（自动创建的渐变、边框等）。我将按钮连接到标准服务器端单击事件。我将按钮放置在 ASP:UpdatePanel 内。当我在 Chrome (v 12) 中打开网站并直接单击按钮上呈现的图像时，服务器端的单击事件不会触发。不过有一个回发。如果我使用 FireFox 或 IE，它工作正常（即，服务器端ConfirmButton_Click 触发）。如果我的按钮位于 UpdatePanel 之外，那么在 Chrome 中也可以。

代码（我省略了导入）：

1.允许图像的自定义按钮：

namespace MyControlLibrary
{
/// <summary>
/// Render an HTML button instead of an input element.
/// </summary>
[ToolboxData("<{0}:HTMLButton runat=server></{0}:HTMLButton>")]
[ParseChildren(false)]
[PersistChildren(true)]
public class HTMLButton : Button
{
    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            return HtmlTextWriterTag.Button;
        }
    }

    protected override void RenderContents(HtmlTextWriter output)
    {

        RenderChildren(output);
    }
}
}

2.页面，代码隐藏：

 namespace WebApplication2
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void ConfirmButton_Click(object sender, EventArgs e)
            {
                 // would be nice to be able to do something here
            }
       }
    }

3.ASP 标记：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"     AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<%@ Register Assembly="MyControlLibrary" Namespace="MyControlLibrary" TagPrefix="CUSTOM" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Always">
        <ContentTemplate>
            <CUSTOM:HTMLButton runat="server" ID="HTMLButton2"     OnClick="ConfirmButton_Click"
                Enabled="true">
                <img id="Img1" runat="server" src="~/images/page_go.png" alt="some alt     text" />
                <asp:Literal ID="Literal1" runat="server" Text="Inside an ASP:UpdatePanel"     />
            </CUSTOM:HTMLButton>
        </ContentTemplate>
    </asp:UpdatePanel>
    <CUSTOM:HTMLButton runat="server" ID="HTMLButton1" OnClick="ConfirmButton_Click"
        Enabled="true">
        <img id="Img2" runat="server" src="~/images/page_go.png" alt="some alt text" />
        <asp:Literal ID="Literal2" runat="server" Text="Just on the page" />
    </CUSTOM:HTMLButton>
</asp:Content>

更新：附加信息

上，我发现当我直接单击按钮上的图像时（从而导致问题），表单数据与单击非图像时略有不同按钮的区域。

ScriptManager1:UpdatePanel1|HTMLButton2
__EVENTTARGET:
__EVENTARGUMENT:
__VIEWSTATE:/wEPDwUJNDk5NDQ3MTUyZGSFDQs1Xrosg9lxmcJ 3Q6Nz2 zbrq0CLJEKUy3yWQ0yw==
__EVENTVALIDATION:/wEWAwK8nZ3eAgKqrv38BgLZ8qO9CG7K1tlR9ucFA1AbifYgZtWmVKs/NshLxmxCD39QxIE9
__ASYNCPOST:true
HTMLButton2: 

以上是我点击时看到的内容，不是图像上的内容。即，它会导致服务器端单击事件按照我的预期触发。当我直接单击图像时，ScriptManager1 和最后一行中缺少“HTMLButton2”。

Answer 1

好的，我找到的解决方案是这样的：我添加了一个与按钮内 Img 的 onclick 绑定的客户端 JS/jQuery 函数。它取消当前事件，并单击父元素。这是代码：

    function clickParent(e) {
        var parentButton = $(e.srcElement).parent().get(0);
        e.preventDefault();
        $(parentButton).click();
    }

事实上，我实际上注册了这个脚本，并从我的自定义 HTMLButton 控件中连接图像的 onclick，这样我就不必将脚本放在使用该按钮的每个页面中。不过，我认为没有必要发布这些详细信息。