即时创建链接区域答案

【问题标题】：Creating link areas on the fly即时创建链接区域
【发布时间】：2013-04-03 22:16:44
【问题描述】：

我想创建一个带有链接图的图像。地图将包含许多必须经常更改的区域。我不想每隔几秒钟重新创建一次区域，我只想在用户真正点击图像时创建它们。

我希望通过在触发 mousedown 事件后创建区域来实现这一点 - 但这似乎不起作用（未处理对新创建区域的点击）。

到目前为止我的 javascript 代码 (fiddle)：

$(document).ready(function () {
    $('#overlayDiv').mousedown(function () {
        $('#image').click(function () {
            $('#linkmap').children().remove();
            $(document.createElement('area'))
                .attr("shape", "rect")
                .attr("onclick", "alert('click');")
                .attr("coords", "0,0, 400,400")
                .appendTo('#linkmap');
        });
    });
});

应该发生的事情的“工作流程”

点击图片
所有现有区域都被删除
重新创建该区域
在新建区域处理点击

【问题讨论】：

请删除该内联属性处理程序并改用.click(function(e){alert(e.type);})
看来你更想要this（虽然它也不好用）
你说得对，它不起作用。我将在我的问题中添加一个“工作流程”
“经常改变”是什么意思？多久一次，为什么？为什么要使用显式<area>s，在您的数据中动态查找点击坐标可能是一个更好的解决方案？
我即将创建动态地图。用户应该能够单击指定区域以创建建筑物。这些建筑物也应该是可点击的。此外，地图应该是可移动的。我认为这可以通过使用一些 javascript、区域和一些图像来实现，但特别是当地图移动时，区域的重新定位对于某些浏览器/计算机来说是很重的。我已经尝试过动态查找，但不知道如何计算面积（它们是形状，不是简单的矩形）。但也许我选错了马，而另一种语言比 javascript 更好？

标签： javascript jquery jquery-events imagemap

【解决方案1】：

这对您不起作用，因为您的地图标签中没有名称属性。

查看更新的小提琴：http://jsfiddle.net/gFVVh/1/

<img src="https://www.google.de/logos/2013/henry_van_de_veldes_100th_birthday-1402005-hp.jpg" usemap="#linkmap" id="image" />
<map id="linkmap" name="linkmap"></map>

【讨论】：

"Clicked" 不会在第一次点击时出现。之后，该区域已经存在，并且似乎没有被删除，因此出现了弹出窗口。
不，它没有，因为你不是这样编程的。 mousedown 在图像上创建单击事件，进而创建区域。因此，它的读取方式是：“在用户对 'overlayDiv' 执行 mousedown 后，在 'image' 上创建单击事件，这会删除 'linkmap' 的子项，然后在 'linkmap' 内创建一个新区域，其中有点击事件'alert(click)'"。如果您想向某物发送“点击”，请在定义 onClick 事件后使用 $(element).click()。