跳到主要內容

發表文章

目前顯示的是 一月, 2013的文章

範例 - JavaScript 替換瀏覽器預設滑鼠右鍵選單

這次實作的功能是要替換瀏覽器在網頁被點擊滑鼠右鍵時跳出的選單
改成跳出自製的選單

滑鼠的一個點擊(click)就會引發3個事件
點擊滑鼠左鍵的話,依序是 onmousedown -> onmouseup -> onclick
如果按下的是滑鼠右鍵,則依序是 onmousedown -> onmouseup -> oncontextmenu

瀏覽器的預設右鍵選單通常在執行 oncontextmenu 前就會先出現(display)
所以我們就必須在 onmousedown or onmouseup 時事先處理 oncontextmenu 事件
在 firefox 18.0.1 時會發現其在 oncontextmenu 時處理的頁面狀態與點擊發生前相同
所以要對應 firefox 的跨瀏覽器處理,還要注意oncontextmenu事件是否使用前面事件的物件
實作程式碼如下:

在table裡使用套用overflow屬性

要在 table 中使 overflow 生效,需多做一些CSS設定
對table設置 table-layout:fixed;
然後在要設定此屬性的 table element(如td)裡再設置以下CSS屬性
white-space:nowrap;     /* 避免折行,雖然在部分瀏覽器中不加這行也可以 */
overflow:hidden;    /* 或者是讓它自動出現scroll,overflow:auto; */