检测JQuery UI Slider事件密钥代码

Question

为了收集有关用户如何与Web应用程序交互的一些统计信息，我想知道他们如何使用某个JQuery UI Slider。具体来说，我想知道他们是否使用鼠标或键盘（箭头键）来操纵滑块。

我的代码如下：

$test.slider({range: "min", step: 0.1, slide: updatePosition, stop: slideEnd, start: slideStart});

如何在我的函数slideStart和slideEnd中检测是否按下了箭头键或使用了鼠标？我是否必须修改插件源？这就是我想避免的。

在$ test中为click / keypresses添加另一个处理程序是最好的选择吗？

Answer 1

您可以将事件侦听器绑定到slidechange和/或slide事件。第一个参数是包含originalEvent的事件对象。其type属性包含您要查找的内容。

$test.bind('slide slidechange', function(event, ui) {
    if (event.originalEvent) {
        console.info(event.originalEvent.type);
    }
});

小心！只有在用户互动触发事件时才会显示originalEvent。

Answer 2

我想出了一种看起来最干净的方式。我刚补充说：

$test.keyup(slideKey);

$ test是我的滑块div。我不得不使用keyup()而不是keypress()来抓住Chrome中的箭头键。

在slideKey函数中，我只使用传入的事件对象。

function slideKey(e)
{
    console.log(e.keycode);
}