js點擊出現懸浮窗效果不使用JQuery插件_javascript技巧

JQuery有很多這樣的插件，但我們公司不用jquery，沒有插件，所以我就試著自己寫，我也不知道別人是怎麼寫的，純粹是按著自己的想法來的。

直接上程式碼：

複製程式碼 程式碼如下:

head> >

Click

• Demo 1


• Demo 2

Demo 3

• Demo 4 li>
  
• Demo 5

複製到本地就可以測試了。

這裡要說一下cancelBubble這兩個東西。因為我做的效果是點擊按鈕就顯示div，點擊頁面的任何位置div就消失，但javascript的冒泡機制是button獲得一個onclick事件後，往上冒泡，dom在獲得一個onclick事件，這樣的話就而讓div消失的onclick事件衝突了，所以需要event.cancelBubble = true;這行程式碼來停止冒泡。大體就是這樣，程式碼很簡單。