javascript - 使用 jQuery 鼠标单击事件永久更改 DIV 标记中的文本

Question

我设置了 javascript 鼠标单击事件来检测用户单击图像上的位置，根据单击图像的哪个区域来更新 div 标记中的文本。问题是 div 标签中的文本发生了短暂的变化，然后又恢复为 HTML 中的原始文本。

Javascript:

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $("#area1").click(function (b) {
            $("#results").html("Text replaced by JS Mouse Click for area1");
        });  
        $("#area2").click(function (b) {
            $("#results").html("Text replaced by JS Mouse Click for area2");
        });             
        $("#area3").click(function (b) {
            $("#results").html("Text replaced by JS Mouse Click for area3");
        });   
    });
</script>

HTML:

    <img id="pic" usemap="#imagemap1" src="image.jpg" />
    <map id="imgmap" name="imagemap1">
        <area id="area1" shape="circle" alt="" title="" coords="51,46,25" href="" target="" />
        <area id="area2" shape="circle" alt="" title="" coords="71,131,25" href="" target="" />
        <area id="area3" shape="circle" alt="" title="" coords="141,72,25" href="" target="" />
    </map>

    <div id="results">
        Original HTML Text
    </div>

DIV 标记中的文本将会更改，但只会更改一秒钟，然后返回“原始 HTML 文本”。如何永久更改 DIV 标记中的文本，直到用户单击图像映射的其他部分？

Answer 1

听起来好像您的点击触发了默认操作，刷新页面。尝试阻止这种情况。另外，我将您的 3 个点击处理程序缩短为一个。

$("[id^='area']").click(function (e) {
    e.preventDefault();
    $("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id"));
});