Question

我有一个包含多个元素的页面，可以通过JQuery-ui进行拖动。

我想这样做，以便当用户点击其中一个元素并按任意键时，将调用另一个函数进行进一步处理（并检查键码）

鉴于HTML：

<div id="drag-el" class="drsel"> </div>

如果我使用javascript：

$(document).ready(function() {
    $('.drsel').each(function() {
        $(this).on('keyup', function(e) {
            alert("Keyup event");
        });
    });
});

然后事件将永远不会发生。

相反，我必须使用javascript：

$(document).ready(function() {
    $(document).on('keyup', 'body, .drsel', function() {
        alert("Keyup event");
    });
});

但是，在这种情况下，只有当用户点击主体（即不是可拖动元素）时才会触发事件，然后单击该元素，然后按一个键。

另一个问题是，如果用户在焦点位于文档正文时按下某个键，则会触发该事件，但如果＆＃39; body＆＃39;未包含在选择器中。

以下是您可以使用的jsfiddle。

有解决方法吗？我甚至还添加了

$(document.body).focus();

到ready函数，但发现只在页面加载时才有效 - 如果页面重新加载，那么该解决方案不再有帮助。

Answer 1

正如我们在评论中所说，您可以通过点击或mousedown事件来解决焦点元素的问题：

https://jsfiddle.net/mhobd21k/3/

  $('.drsel').on('click', function(e){
    $(this).focus();
  });

OR

  $('.drsel').on('mousedown', function(e){
    $(this).focus();
  });

如何在JQuery-ui可拖动元素中使用keyup事件？

1 个答案: