pageX和pageY与jQuery按键事件不起作用

问题描述：

这是我的代码，ev.pageX事件不起作用。我不理解为什么如此。但是，它使用click事件。这里使用的事件是keypress事件，我在寻找ev.pageX的值，所以我可以根据文本框中的格式设置CSS绝对参数。pageX和pageY与jQuery按键事件不起作用

需要帮助！

<head> 

    <style> 
    textarea{ 
    width:300px; 
    height:300px; 
    } 

.popup{ 
    position:absolute; 
    border:1px solid gray; 
} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 

<body> 

<textarea></textarea> 

<script> 
    $(function() { 
     var $popup = $('<select/>', { 
      'html': 'popup' 
     }) 
      .addClass('popup') 
      .appendTo('body') 
      .append($('<option/>').html('lala'), 
        $('<option/>').html('blabla')) 
      .change(function() { 
       $(this).fadeOut(); 
      }) 
      .hide(); 



     $('textarea').keypress(function(ev) {    
      if ($popup.is(':visible')) { 
       $popup.fadeOut(); 
      } else { 
       if (ev.keyCode === 32) { 
        console.log('pressed');    

        ev.preventDefault() 
        var pagex = ev.pageX;        
        console.log(pagex); 

        $popup.css({ 
         'left': ev.pageX + 10, 
         'top': ev.pageY - 10 
        }); 


        $popup.fadeIn(); 

        console.log('working'); 
       } 
       }     


     }); 



    }); 
</script> 
</body>

'pageX'和'pageY'是用于鼠标事件的，而不是我认为的键盘事件。 – gcampbell

答

您对ev参考是按键事件，而pageX属性和pageY保留鼠标事件。

您可能会在鼠标移动时跟踪鼠标坐标，将值分配给全局，然后将弹出窗口放在最后记录的全局值上。然而，这可能是过度的资源密集型，取决于你的用例。

pageX和pageY与jQuery按键事件不起作用

相关推荐