針對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中添加相應的鏈接即可。