カスタムHTMLの要素マウスの右ボタンメニュー
アイデアの実現
トリガされたContextMenuイベント、デフォルトの動作をキャンセルする（ブラウザの独自のメニューを防ぐために、あることが表示されている）場合には、イベントオブジェクトはマウスクリックの位置を決定する権利を獲得するために、左と上の値の表示メニューなど
コーディング
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<スクリプト>
window.onload =関数（）{
VARメニュー=のdocument.getElementById（ 'メニュー'）;
document.body.oncontextmenu =機能（E）{//カスタムマウスイベントハンドラ本体要素
VaRのE = E || window.event;
e.preventDefault（）; //右クリックメニューをサポートしていないシステムを防ぎますIE8-
//表示メニューには、カスタムの場所を調整します
scrollTopスプライトの=を聞かせて
document.documentElement.scrollTop || document.body.scrollTop; //スライダの垂直位置を取得します。
scrollLeftの=を聞かせて
document.documentElement.scrollLeft || document.body.scrollLeft; //水平スクロールバーの位置を取得します。
menu.style.display = 'ブロック';
menu.style.left = e.clientX + scrollLeft + 'ピクセル';
menu.style.top = e.clientY + scrollTopスプライト+ 'ピクセル';
}
あなたが他の場所でマウスをクリックしたときに//メニューを隠します
document.onclick =関数（）{
menu.style.display = 'なし';
}
}
</ SCRIPT>
<スタイル>
* {
マージン：0;
パディング：0;
}
P {
マージントップ：200pxの。
}
ULのLi {
リストスタイルのタイプ：なし。
マージン：10pxの0;
テキスト整列：センター;
}
＃メニュー{
国境：1pxの固体#CCC。
背景：#eee;
位置：絶対; // 絶対位置にセットアップメニュー
幅：100ピクセル;
高さ：120ピクセル;
表示：なし;
}
</スタイル>
</ head>の
<ボディスタイル=「オーバーフロー：自動」>
<DIV ID = "ボックス" スタイル= "高さ：5000px;幅：5000px">のdiv </ div>とbody要素のスクロールバーが表示されてみましょう
<のdivのid = "メニュー">
<UL>
<LI> <a href="#">分享する</a>ます。</ li>
<li><a href="#">收藏</a></li>
<li><a href="#">举报</a></li>
</ul>
</div>
</body>
</html>
实现效果
