clientX和clientY 事件屬性的使用
阿新 • • 發佈：2018-11-07
需求：
做專案中遇到一個這樣的需求，點選屬性選單節點，出現顯示框，顯示框的位置隨著滑鼠點選的位置距離而改變。
教程：
clientX 事件屬性
http://www.runoob.com/jsref/event-clientx.html
clientY 事件屬性
http://www.runoob.com/jsref/event-clienty.html
基本定義
clientX 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標。客戶區指的是當前視窗。
clientY 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（客戶區）的垂直座標。 客戶區指的是當前視窗。
遇到的坑
這個功能在一些瀏覽器裡面的相容性和適配性的介紹
jQuery右鍵點選彈出選單，選單隨滑鼠點選的位置的變化而變化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> </head> <body> <div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute"> <ul class="dropdown-menu"> <li> <a href="javascript:;" id="toUpdateBtn">編輯</a> </li> <li> <a href="javascript:;" id="deleteBtn">刪除</a> </li> </ul> </div> </body> <script> //遮蔽瀏覽器右鍵選單 document.oncontextmenu = function() { return false; } //按下滑鼠 $(document).mousedown(function(e) { var key = e.which; //獲取滑鼠鍵位 if(key == 3) //(1:代表左鍵； 2:代表中鍵； 3:代表右鍵) { //獲取右鍵點選座標 var x = e.clientX; var y = e.clientY; $("#treeContextMenu").show().css({ left: x, top: y }); } }); //點選任意部位隱藏 $(document).click(function() { $("#treeContextMenu").hide(); }) </script> </html>
原文作者：祈澈姑娘
技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。