使用 JavaScript / jQuery 在键下获取 X，Y 坐标

Get X,Y coordinates on keydown using JavaScript / jQuery

本文关键字：获取 坐标 JavaScript jQuery 使用      更新时间：2023-09-26


我正在开发一个富文本编辑器。我想在用户在触发事件的位置按ctrl+space键时打开用户定义的上下文菜单。
我没有得到事件的坐标。是否有可能获取事件坐标？
这是我的示例代码

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <style>
        #edit{
         border:1px solid red;
         width:500px;
            height:300px;
        }
        #ctxMenu{
         display: none;
         position: absolute;
         border: 1px solid #000000;
        }
        #ctxMenu ul li{
           list-style: none;
        }
    </style>
</head>
<body>
  <div id="edit" contenteditable="true">
  </div>
  <div id="ctxMenu">
      <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
      </ul>
  </div>
 <script>
     $('#edit').keydown(function(e){
         /**** get x, y coordinates.
          *
          */
         if (e.ctrlKey && e.keyCode == 32) {
            $('#ctxMenu').show().css({left:x,top:y});
         }
     });
 </script>
</body>
</html>

要获取键盘事件的 x，y： 

$('#edit').keydown(function(e){
     var $target = $(e.target);
     var x = $target.offset().left;
     var y = $target.offset().top;
     if (e.ctrlKey && e.keyCode == 32) {
        $('#ctxMenu').show().css({left:x,top:y});
     }
 });

HERE-JSFIDDLE 是代码的输出。

或

JS代码(只需用下面的代码替换你的JS代码。

$(document).ready(function(){
  $('#edit').bind('keydown', function(e){
    var $this = $(this);
    var a = $this.data('mousepos').x;
    var b = $this.data('mousepos').y;
    if (e.ctrlKey && e.keyCode == 32) {  
        $('#ctxMenu').show().css({left:a,top:b});
    }else{
        $('#ctxMenu').hide();
    }
  });
  $('#edit').bind('mousemove', function(e){
    $(e.target).data('mousepos', {x: e.pageX, y: e.pageY});
  });
});

也许caret((就是你要找的(pageX和pageY不适用于div(;以下链接可能会有所帮助：

jQuery：在没有浏览器特定代码的情况下获取输入中文本的光标位置？

如果你想使用文档坐标，你可以使用以下内容，但它会响应页面上任何位置的按键，而不仅仅是文本区域(如果你使用div 代替，e.pageX 将是未定义的(

$(document).keypress(function(e)
{
     var code = (e.keyCode ? e.keyCode : e.which);
     if (e.ctrlKey && code == 32) 
     {
        alert(e.pageX); // for y use e.pageY
     }
 });

@Tim，如果光标位置后没有文本，则不起作用。可能在光标处插入元素并发现相同的元素会起作用？我在IE 8中使用它，我发现x和y位置为零。我有一个内容可编辑的div，文本为"一二"。现在，如果我的光标在文本之间的任何位置，我会得到值，但如果它在两个之后移动，则两者都为零。插入元素然后查找也是没有用的。有什么意见吗？

相关文章：