下面先給大家介紹下js實現的右鍵菜單功能，具體詳情如下所示：
這一章解決的問題
1、實現右鍵菜單功能代碼。
2、阻止默認事件的實際應用。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>右鍵菜單</title><style type="text/css">#menu {position: fixed;left:0;top:0;width:200px;height: 400px;background-color: blue;display: none;}</style></head><body><div id="menu"></div><script type="text/javascript">var menu = document.getElementById("menu");document.oncontextmenu = function(e) {var e = e || window.event;//鼠標點的坐標var oX = e.clientX;var oY = e.clientY;//菜單出現后的位置menu.style.display = "block";menu.style.left = oX + "px";menu.style.top = oY + "px";//阻止瀏覽器默認事件return false;//一般點擊右鍵會出現瀏覽器默認的右鍵菜單，寫了這句代碼就可以阻止該默認事件。}document.onclick = function(e) {var e = e || window.event;menu.style.display = "none"}menu.onclick = function(e) {var e = e || window.event;e.cancelBubble = true;}// document.addEventListener("contextmenu",function(e){// var e = e || window.event;// e.preventDefault();// alert("menu");// },false)</script></body></html>好了，以上代碼詳情是js實現的右鍵菜單功能。下面接著給大家介紹下js 拖曳功能的代碼解析
這一章解決的問題
1、怎樣在網頁中實現拖曳功能。
2、document.documentElement與document.body的區別。
document.documentElement.clientWidth指整個html文檔的寬度，document.body.clientWidth的寬度。這兩者是不一樣的。可以在console控制臺通過console.log(document.documentElement)和console.log(document.body)進行測試。
3、getBoundingClientRect().left與offsetLeft的區別。
getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對于父級的left和top。getBoundingClientRect()獲取相對于窗口的left、top、right、bottom。
4、e.clientX指的是鼠標點相對于窗口的坐標。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>彈窗</title><style type="text/css">#mask {position: fixed;left:0;top:0;width:100%;height: 100%;background-color: hsla(250,100%,50%,0.6);display: none;}#popBox {position: absolute;background-color: #fff;width:200px;height: 200px;/*left:50%;top:50%;*//*margin-top: -100px;margin-left: -100px;*/}</style></head><body><button id="clickBtn">點擊</button><div id="mask"><div id="popBox"></div></div><script type="text/javascript">var clickBtn = document.getElementById("clickBtn");var popBox = document.getElementById("popBox")var mask = document.getElementById("mask");clickBtn.onclick = function() {mask.style.display = "block";popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";}popBox.onclick = function(e) {var e = e || window.event;//e指所有代碼的集合，通過它可以獲取事件的各種屬性。e.cancelBubble = true;//阻止事件冒泡，即點擊事件不會傳遞到mask這一層，意味著不會觸發點擊mask事件代碼。}mask.onclick = function() {mask.style.display = "none";}//拖拽 mousedown->mousemove->mouseup popBox.onmousedown = function(e) {var e = e || window.event;var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對于父級的left和top。getBoundingClientRect()獲取相對于窗口的left、top、right、bottom。var oX = e.clientX - pos.left;//clientX指相對于窗口的坐標。var oY = e.clientY - pos.top;document.onmousemove = function(e) {var e = e || window.event;var oLeft = e.clientX - oX;var oTop = e.clientY - oY;popBox.style.left = oLeft + "px";popBox.style.top = oTop + "px";if (oLeft<0) {popBox.style.left = 0 + "px";};if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整個html文檔的寬度，document.body.clientWidth的寬度。這兩者是不一樣的。可以在console控制臺通過console.log(document.documentElement)和console.log(document.body)進行測試。}if (oTop<0) {popBox.style.top = 0 + "px";};if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";}}popBox.onmouseup = function() {document.onmousemove = null;}}</script></body></html>以上所述是小編給大家介紹的基于JavaScript實現右鍵菜單和拖拽功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
