Img要素を持つカスタムASPボタンは、Chromeを使用して画像を直接クリックするとサーバーサイドイベントを発生させません。

Question

イメージの要素（およびASPリテラル）を持つカスタムASP.NETボタンがあります。画像付きのボタンをテキストにしたいのですが、CSSを使用して背景画像を設定すると、標準的なボタンの書式（グラデーション、枠線などが自動的に作成されます）がすべて削除されるようです。私はボタンを標準的なサーバー側のクリックイベントに接続しています。私はボタンをUpdatePanelの中​​に置いています。 Chromeでサイトを開いたとき（v12）、ボタンでレンダされた画像を直接クリックすると、サーバー側のクリックイベントは発生しません。しかし、ポストバックがあります。私がFireFoxまたはIEを使用すると、正常に動作します（つまり、サーバー側のConfirmButton_Clickが起動します）。 UpdatePanelの外にボタンがあると、Chromeでも問題ありません。

コード（私が輸入を残し）：画像を可能に

1.Myのカスタムボタン：

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

私が見つけた解決策は次のとおりです。クライアント側のJS/jQuery関数をボタンのImgのonclickに結びつけました。現在のイベントをキャンセルし、親要素をクリックします。ここでは、コードは次のとおりです。実際のところ

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

、私は実際にこのスクリプトを登録するだけでなく、私は、スクリプトを配置する必要がないように私のカスタムHTMLButtonコントロール内からの画像のonclickのフックアップボタンを使用するすべてのページで私はそれらの細部を掲示する必要性を見なかった。