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

前不久使用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中添加相应的链接即可。