我为一个基金会工作，该基金会旨在提高人们对互联网无障碍的认识。为了演示，我们想提供一个小型研讨会，模拟不同的残疾/缺陷。这是通过一个专门为这次演示创建的网站来完成的。
其中一个被证实的缺陷是有震颤，这意味着经历颤抖，难以控制的手部运动。由于这种缺陷，当鼠标在链接上时，很难准确地移动鼠标光标并按下鼠标按钮。一些老年人和有疾病的人，如帕金森氏症患者，都可能患有震颤。
现在我想以一种不可预测的方式移动鼠标光标，这样人们就很难点击一个小按钮。因为JavaScript不允许直接移动鼠标光标，所以我正在寻找其他方法来实现这一点。我有以下想法:
使用模拟鼠标晃动的鼠标驱动程序/实用程序。 通过CSS隐藏鼠标光标，在原始光标的位置放置一个晃动的鼠标光标的GIF动画(使用JavaScript)，然后让目标链接每隔几秒就可以点击一次，持续一秒钟左右。这至少会给人一种感觉，好像总是在错误的时刻点击。
虽然第一个想法很酷，但我找不到这样的工具，无论是Mac还是Windows。我自己也没有任何编程技能。
第二个想法似乎有点笨拙，但我认为它会达到预期的效果。
有人有别的想法吗?
当前回答
在你的DIV中，CSS-hide光标使用cursor:none; 创建一个。png光标图像，并使用鼠标移动的jQ移动它(左，上) 使用setTimeout随机化。png的margin-left和margin-top (使重新定位平滑使用CSS3过渡或做它与jQ .animate())。
注意:脚本不能知道手是否仍然在鼠标上;)
function rand(min, max) {return Math.random() * (max - min) + min;} var $cursor = $('div img'); $('div').mousemove(function(e) { // Make .png follow the mouse coordinates $cursor.css({ left: e.pageX, top:e.pageY }); }).hover(function(e){ $cursor.toggle(); // Show .png cursor as we enter the DIV }); (function tremor(){ // Add tremor to .png image $cursor.css({ marginLeft: rand(-15,15), // arm tremor marginTop: rand(-30,30) // hand contractions }); setTimeout(tremor, rand(50,100)); }()); div{ position:absolute; background:#eee; height:100%; width:100%; cursor:none; } div img{ display:none; position:absolute; transition: margin 0.2s; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><img src="http://i.stack.imgur.com/KwMGA.png"></div>
其他回答
你不能指望任何人都能把他们的手握得非常稳定，所以你可以考虑的一件事是，
向用户解释你在做什么， 让演示页面上的可点击元素比正常情况下要小得多。 将示例系统上的鼠标灵敏度提高到最大。
我的理由是(注意，我不是用户体验或医学专家)通过缩小可点击元素，你为大多数人创造了一个类似的问题，患有帕金森病的人每天都会面对一个网站。
我做了一个快速的演示，希望你能够在此基础上编写代码，使用指针锁API。
我分叉这个指针锁演示回购和修改它，以添加一个随机移动元素。
这是我GitHub页面的链接:https://aristocrates.github.io/pointer-lock-demo 这是我的回购链接:https://github.com/aristocrates/pointer-lock-demo
重要的javascript代码包含在app.js的canvasLoop(e)方法中。
与最初的演示相比，我唯一改变的地方是台词
x += movementX * 2;
y += movementY * 2;
我添加了两条线来表示随机移动:
x += Math.floor(Math.random()*3 - 1);
y += Math.floor(Math.random()*3 - 1);
还有很多地方你可以改进，但希望这能帮助你开始。
这是我的xdotool脚本使用AutoIt的windows版本。这是我的第一个AutoIt脚本，只花了几分钟就写好了，所以我相信它可以改进。只需保存扩展名。au3并使用AutoIt (run Script x86)运行它。
HotKeySet("{HOME}", "GStart")
HotKeySet("{PAUSE}", "Gpause")
HotKeySet("{ESC}", "Gexit")
While 1
Sleep(100)
WEnd
Func Gstart()
While 1
sleep(100)
$pos = MouseGetPos()
$x = $pos[0] + 10 - Random(0, 20, 1)
$y = $pos[1] + 10 - Random(0, 20, 1)
MouseMove($x,$y)
Wend
Endfunc
Func Gpause()
While 1
sleep(100)
Wend
Endfunc
Func Gexit()
MsgBox(0, "exit box", "Script exited")
Exit 0
EndFunc
控制
Home:开始模拟。 pause:暂停模拟。 Esc:退出模拟。
或者使用我在这里编译的版本。
我曾经在Puppy Linux论坛上开玩笑，得到这样的评论:
患有帕金森症的人不会觉得这很有趣!! 幸运的是，这里的治愈方法就是cntrl-C。
下面是需要xdotool的shell脚本
#!/bin/sh
while :; do
xdotool mousemove_relative -- -$(($RANDOM % 10)) $(($RANDOM % 10))
xdotool mousemove_relative -- $(($RANDOM % 10)) -$(($RANDOM % 10))
sleep ${1:-.1} #adjust this as necessary for effect
done
命名为parkinson_sim，并使用可选参数运行两次震动之间的时间，可以是0.001到999.0。
Parkinson_sim [time_between_tremors_in_seconds] #默认值为0.1
我犯了一个错误，我自己点击了它，而不是从命令行运行它，很快就发现这是多么令人沮丧。我试了几次才打开一个终端窗口来杀死它。
你的第二个想法(隐藏光标)是一个我认为可能很适合你的想法的一半:
如您所建议的，通过CSS隐藏鼠标光标。(光标:没有这个) 使用一些图像+ CSS绝对定位+ JS来模拟鼠标指针，而不是一个晃动光标的GIF;也就是说，沿着鼠标在页面上移动，并在鼠标光标所在的位置放置光标图像。
然后，在光标代码中添加一些颤动数学，以“摇动”光标。由你来决定什么是正确的曲线来正确地模拟震颤输入。
最后:对于你正在编程的任何控件(链接等):
捕获单击事件，根据震颤曲线的状态将它们推到当前的“震颤”位置，并检查元素，看看用户是否已经摆脱了预期的元素，或者可能进入了预期之外的元素。
这个实现的一个主要好处是:你的“晃动的光标”将显示在触控设备上，而触控设备本来就没有光标。
编辑:
基于评论中Michael Theriot(非常干净和有用!)的基本JSFiddle，这里有一个在当前光标位置附近以正态分布扫描不断抖动的JSFiddle: http://jsfiddle.net/benmosher/0x4mc64v/4/
(normal数组是在R控制台中调用rnorm(100)的结果。在JS中我能想到的最简单的方法是对正态分布随机整数进行抽样。)
