Question

我是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，因此猜测这些依赖于触地和触摸事件，而平板电脑表现得非常好。

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

添

Answer 1

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

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

E.g。

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

$("#element").mouseleave(function(){
$(this).removeClass(".hover");
});

与onclick，onmousedown＆amp; onmouseup

1 个答案: