0

我已经设置了 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 标记中的文本？

4

2 回答 2

3

听起来默认操作正在触发您的点击，刷新页面。试着阻止它。此外，我将您的 3 个单击处理程序缩短为一个。

$("[id^='area']").click(function (e) {
    e.preventDefault();
    $("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id"));
});
于 2013-05-29T15:12:17.913 回答
0

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

  1. 定位 #area 的所有孩子
  2. 你真的想在你的 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/

于 2013-05-29T15:59:41.177 回答