如何将 keyup 事件与 JQuery-ui 可拖动元素一起使用？

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");
    });
});

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

另一个问题是，当焦点位于文档正文上时，如果用户按下某个键，事件将触发，但如果 'body' 未包含在选择器中，则事件将永远不会触发。

这里有一个 jsfiddle 你可以玩一下。

有办法解决这个问题吗？我什至加了

$(document.body).focus();

到就绪函数，但发现它仅在页面第一次加载时有效 - 如果页面重新加载，则该解决方案不再有帮助。

Answer 1

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

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

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

或

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