我有一个混合移动应用程序的问题。
我想在单击时更改 div 的样式。我目前有类似的东西:
<div id="foo">
Lorem ipsum dolor...
</div>
并在我的 css 文档中申请:
#foo:active{
background-color: red;
}
但是,在我的移动应用程序中,当我进行快速点击(快速点击)时,该样式不适用(它仅适用于长点击)。
我该怎么做才能在快速点击时改变样式?
PS:
我还尝试使用带有 javascript 的“单击”事件,添加和删除具有不同样式的类,但是它仅适用于添加类,并且在删除类时没有任何反应。
CSS:
.bar{
background-color: red;
}
js:
$$('#foo').click(function(){
$$(this).addClass('bar');
setTimeout(function(){
$$(this).removeClass('bar');
}, 100);
});
注意:$$
他指的是我正在使用的包含Framework7的DOM管理库
如果您在单击时除了创建该类的样式之外,还创建另一个没有任何样式或具有默认样式的类,您会怎么想。
CSS:
JS:
可能是这样的。
版
问题在于您在 setTimeout 中执行的 $(this) 的引用,您应该使用选择器或创建一个引用该元素的变量,如下所示:
或者这样:
虽然在那种情况下,我认为你不需要另一个类,它应该像你之前的代码一样工作:
请记住,点击事件在触摸屏上的响应方式不同,这主要是由于在此类屏幕上触发事件时存在延迟。这个延迟是300ms,这就是为什么你需要保持至少 0.3 秒才能发生点击事件。
HTML5 在其所有规范中带来了触摸事件,例如:
这些事件是专门为移动/触摸设备设计的,因此在触发这些事件时没有延迟。
要纠正您的问题,您应该使用以下事件: