onclick、onmousedown 和 onmouseup 的不透明度答案

【问题标题】：Opacity with onclick, onmousedown & onmouseuponclick、onmousedown 和 onmouseup 的不透明度
【发布时间】：2013-01-16 02:51:18
【问题描述】：

我是 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 事件接管（我已经读过这是因为它们都是点击事件的一部分 - 有道理！），我猜 onclick 事件也可能会混乱事情进一步发展。

预期/期望的行为：

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

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

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

非常感谢您的帮助。

提姆

【问题讨论】：

标签： html timer toggle image opacity

【解决方案1】：

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

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

例如

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

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

【讨论】：

感谢您的回复。我必须去阅读css转换！将您的小提琴复制到一个 html 文件并且无法获得 0.2 的不透明度？此外，由于触摸屏，不能使用“悬停”。
好吧，我几乎破解了它。决定使用第二个透明图像而不是不透明度为 0。我一生无法弄清楚的唯一一点是在从透明返回时在短按上停止 mouseup 函数调用。我的代码将显示 mouseup() 函数。这就是问题所在。当我“使”它成为 mouseup 事件的活动代码时，我不希望“tog-vis('mydiv')”运行，仅适用于未来的 mouseup 事件。如何在替换代码时停止运行代码？这是所有的 html：link.
短按会使黑色方块出现和消失（这是“功能”，长按会使红框变成棕框。棕框是可点击的，没有动作。长按棕框将返回红色框。此时您将看到黑框出现或消失 - 这是我需要停止的，并且仅针对此特定的 mouseup 事件。之后它需要像以前一样工作。