javascript - 如何使 OnClick 与 jQuery maphilight 一起工作

Question

我正在使用 jQuerys maphilight 进行图像映射。但是，在添加函数 OnClick="DamageControlModal_OnClick" 时。它不会工作或运行它。我尝试调用 OnClick 的方法是 C# 中的。

我是否缺少 jQuery 中启用 OnClick 功能所必需的东西？

jQuery

<script type="text/javascript">
    jQuery(function () {
        jQuery('.map').maphilight({ fade: true });
        jQuery('map > area').easyTooltip();         
    });
</script>

图像 map

<div id="imageMapDiv" style="margin-left: 100px" runat="server">
                                        <img id="Image-Map" src="/Images/Map/FordTransitVanHighRoof.png" border="0" usemap="#image-maps" alt="" class="map" />
                                        <map name="image-maps" id="ImageMapping">
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="Roof" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="140,534,200,534,279,534,359,536,432,534,486,533,491,578,493,616,489,654,485,666,369,666,220,667,140,668,137,620,138,574" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="Windscreen" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="139,532,111,531,90,532,71,538,64,552,61,581,62,615,63,648,66,660,80,668,110,671,127,669,138,669,132,615,134,556" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="Bonnet" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="59,548,30,558,18,565,16,583,16,613,17,633,27,642,48,649,62,654,59,597,60,562" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="FB" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="553,172,572,172,595,175,602,178,629,178,672,177,688,173,718,172,716,186,715,198,709,205,702,211,678,210,636,211,589,211,573,211,563,208,556,200,554,186" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="RB" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,434,553,432,555,454,567,465,590,467,619,467,674,465,701,465,714,461,716,454,719,437,718,434,707,433,705,443,702,456,678,456,636,456,588,455,568,456,565,445" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSRG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="626,323,605,323,584,323,577,325,575,332,576,342,576,361,576,370,583,376,594,376,615,377,624,377,626,372,627,343" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSRG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="650,323,666,322,690,321,700,326,699,338,699,360,699,371,690,374,678,376,658,376,647,377,646,350,647,325" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSSG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="395,355,383,345,364,330,354,323,341,321,334,320,326,319,324,321,324,330,325,347,328,360,333,371,348,376,367,379,380,381,388,382,386,374,385,362,387,357,390,354" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSSG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="116,110,111,108,117,101,128,94,140,83,154,75,165,74,177,72,182,76,180,101,177,109,172,120,156,127,134,130,124,131,118,131,116,126,116,116" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSM" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="536,107,531,118,532,134,540,137,548,137,556,139,559,127,559,120,559,113,559,109,554,110,555,121,552,122,549,122,548,112,548,109,542,108" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSM" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="723,108,736,106,741,119,741,128,738,134,730,137,720,137,716,140,713,134,713,119,713,110,715,112,716,121,718,124,719,120,720,111" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSQ" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="187,294,184,420,185,445,186,453,144,453,139,433,127,418,112,415,95,414,75,418,61,419,29,420,25,374,33,364,41,293" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="308,307,276,297,232,293,187,292,184,307,185,418,185,442,186,455,309,453" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="196,58,230,50,275,46,317,44,320,60,320,143,320,193,318,203,196,204" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSQ" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="189,292,273,297,309,306,310,368,308,428,308,453,186,453,185,364,186,309" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSRD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,695,279,703,281,710,344,711,383,707,389,707,432,637,432" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSFD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="406,358,367,325,330,313,311,310,311,371,310,424,309,441,309,455,376,454,382,427,395,417,404,412,410,390" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSH" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="712,133,702,138,690,139,682,143,682,151,688,157,695,157,713,154" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSH" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="590,143,568,136,561,134,558,154,580,157,588,153" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSFW" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="444,382,478,390,483,393,484,404,467,404,459,403,452,394" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSRD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,580,279,573,279,568,303,563,381,567,387,567,431,597,432,637,433" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="OSRL" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="721,383,715,383,707,388,707,432,719,433" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSRL" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,388,558,382,554,389,555,432,567,432" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSFD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="195,61,196,170,196,190,196,204,128,205,119,176,109,166,101,165,96,140,99,108,124,88,143,71" target="_self" />
                                            <area OnClick="DamageControlModal_OnClick" alt="" title="NSFW" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="63,132,26,141,21,150,23,158,45,154,52,142" target="_self" />
                                        </map>
                                    </div>

C#

protected void DamageControlModal_OnClick (object sender, EventArgs e)
{
    modalDamageControl.ShowModal();
}

Answer 1

我有一个肮脏但快速的解决方案。

在标记中添加假按钮，位于 div 下方

<asp:Button ID="btnFake" runat="server" OnClick="btnFake_Click" style="display:none"/>

将 JQuery 代码写为

<script>
function DamageControlModal_OnClick() {
    $('#<%= btnFake.ClientID %>').click();
    return false;
 }
</script>

这个假按钮在用户界面上不可见。

干净但长的解决方案

您的区域不是服务器控制，因此它不会调用任何服务器端事件。要调用服务器端代码，请使用 learn how to call web method from jquery .