Question

这是我的代码，ev.pageX事件无效。我不明白为什么会这样。但是，它使用click事件。这里使用的事件是按键事件，我正在寻找ev.pageX的值，所以我可以根据文本框格式化css绝对参数。

需要帮助！

<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>

Answer 1

您对ev的引用是在按键事件上，而pageX和pageY是为鼠标事件保留的。

您可以在鼠标移动时跟踪鼠标坐标，将值分配给全局，然后将弹出窗口置于最后记录的全局值。然而，根据您的使用情况，这可能过于资源紧张。

pageX和pageY与jQuery Keypress事件无法正常工作

1 个答案: