针对jquery绑定click事件执行两次，layer弹出框，以及img的map属性应用。

浏览数：43 / 时间：2015年06月09日

前不久使用jQuery与layer实现一个弹出框，发现在绑定弹出框事件时，事件执行了两次，准确的说是方法同时注册了两次，不分先后执行了两遍，导致弹出框弹出两次。请教同事后，发现原因有可能是jQuery的js与layer的js冲突（具体原因还需要深入了解），通过网络和请教同事，得到了三种处理方法。

方法一：不采用jQuery进行事件的绑定，直接在标签中添加onclick事件。

方法二：采用这种方式$("#item_add_button")[0].onclick = function(){方法体}。具体是何原因有待深入学习。

方法三：在绑定事件前加上.unbind("click")对click事件进行清除之后再绑定click事件$(".item_add_button").unbind("click").click(function(){方法体}

使用layer弹出框可以根据需要选择相应的类型。具体可以参考文档：http://sentsin.com/jquery/layer/

项目中用到了对图片中（一般在地图中）不同的部分链接不同的内容。使用到的是<img>的usemap属性。参考资料http://www.w3school.com.cn/tags/att_img_usemap.asp

例子：<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

其中shape属性可以为polygon，使得图形为多边形。之后的coords中coords="x1,y1,x2,y2,x3,y3,..."：每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。
定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。然后在href中添加相应的链接即可。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

针对jquery绑定click事件执行两次，layer弹出框，以及img的map属性应用。