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"));
});

Answer 2

我认为这将是一个更好的解决方案。

定位#area
您真的想在JavaScript中对文字进行硬编码吗？使用data属性，您将能够生成该服务器端。使用$（e.currentTarget），您还可以访问您的坐标和其他属性。

现在您可以显着减少代码：

$(document).ready(function () {
        $("#imgmap area").click(function (e) {
            var description = $(e.currentTarget).data("description");
            e.preventDefault();
           $("#results").text(description);
        });  
    });

据我了解，人们喜欢猫和JSFiddles。所以这里有一个带有猫的JSFiddle来演示上面的代码：http://jsfiddle.net/27QtT/

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

2 个答案: