1

我是 javascript 编程的新手，但我正在取得进步！我正在为自闭症儿童开发一个网络应用程序，用于触摸屏浏览器（55 英寸触摸屏 PC 和 Nexus 7 平板电脑）。我们只会使用 Firefox，因为它看起来最兼容。孩子们将点击图像“按钮”来做出选择并传达他们的需求。按钮需要在触摸时提供视觉反馈。我通过使用 CSS 中的活动状态解决了这个问题：

img { opacity:1.0 };
img:active { opacity:0.4 };

这工作正常。悬停不适合在触摸屏上使用。我还需要使某些图像不可见，但要保持在原处，并在长按时打开和关闭。为此，我找到了一个切换功能和一个计时器功能并将它们组合在一起。

JAVASCRIPT（<head>页内）：

var t
function tog_vis(id) {
   var e = document.getElementById(id);
   if(e.style.opacity == 1 )
      e.style.opacity = 0 ;
   else
      e.style.opacity = 1 ;

HTML：

<img id="myimg" onclick="DoSomething();" onmousedown="t=setTimeout(function(){ tog_vis('myimg'); }, 1500);" onmouseup="clearTimeout(t);" src="images/img1.png">

问题是活动状态被 onmousedown 和 onmouseup 事件接管（我已经读过这是因为它们都是 click 事件的一部分 - 有道理！），我猜 onclick 事件也可能会进一步搞砸.

预期/期望的行为：

1.正常点击时，图片不透明度变为0.4，释放时返回1，完成onclick请求。

2.长按图片不透明度为0，第二次长按不透明度为1，无onclick事件。

该应用程序最终将有@ 100 个必须执行第一个行为的相似图像，而第二个行为将仅在@ 10 个按钮上需要，因此我可以在必要时愉快地单独编码功能。我还发现 55" 触摸屏（Windows 7）没有响应 img:active CSS，所以猜测这些都依赖于 touchdown 和 touchup 事件，而平板电脑的表现非常好。

非常感谢这里的任何帮助。

蒂姆

4

1 回答 1

1

你可以为这个用例提供 css3 转换和一些 javascript。看看这个小提琴：http: //jsfiddle.net/Ce8J5/

您也可以使用 javascript/jquery 实现悬停，只需删除悬停 css 语句并定义一些附加 css 类并通过 javascript 添加它们。

例如

$("#element").mouseenter(function(){
$(this).addClass(".hover");
});

$("#element").mouseleave(function(){
$(this).removeClass(".hover");
});
于 2013-02-01T00:54:23.137 回答