Firefox 中的活动 CSS 伪类和 iscroll 问题答案

【问题标题】：active CSS pseudo-class and iscroll issue in firefoxFirefox 中的活动 CSS 伪类和 iscroll 问题
【发布时间】：2012-09-14 14:34:32
【问题描述】：

我正在开发一个移动网站。我正在使用 Jquery mobile 和 iscroll 插件。在 chrome 中一切正常。但是在检查 Firefox 时，我发现为元素编写的 :active css 样式不起作用。

这是小提琴 http://jsfiddle.net/zq5AW/

主动效果在 chrome 中有效，但在 Firefox 中无效。

但是当我删除 jquery.mobile.iscrollview-min.js 包含行时。它也开始在 Firefox 中工作。任何人都可以提出解决方案吗？

注意：在谷歌上发现了同样的问题

https://groups.google.com/forum/?fromgroups=#!topic/iscroll/lqPomh3y-TU

但没有答案。

【问题讨论】：

你能创建一个小提琴或某种形式的演示吗？
@Jrod: jsfiddle.net/zq5AW
jsmobile 很烂是我个人的经验，只是让您的网站像任何普通网站一样，但在样板 - html5boilerplate.com （样板是一个移动优化“模板”，用于构建您的网站，因此它们加载更快）
@SimonPertersen：你的意思是说 jquery mobile 很烂？还是滚动？
不太了解 iscroll，但我的缓动滚动项目似乎是一个 gr8 解决方案dropbox.com/sh/dv0lcdwg71m8bt2/VrOPVOq6pz

标签： jquery css jquery-mobile pseudo-class iscroll

【解决方案1】：

Mithunsatheesh，您在两个库之间存在冲突 - jQuery 和 jQuery Mobile。您确定需要同时加载两个库吗？

如果您更改加载库的方式的顺序，那么一切都会正常进行，您将获得所需的结果：

Working Example

除此之外，我可以为您提供另一种解决方案，即使用 jQuery 来获得所需的效果，因为我看不到任何其他可行的可能性：

$(document).ready(function() {
    $("p").mousedown(function() {
        $(this).addClass('hovered');
    }).mouseup(function() {
        $(this).removeClass('hovered');
    });
});

Working Example 2

更新：

参考您的上一条评论，这是我为您提供的最终解决方案：

$(document).ready(function() {
    $("p").mousedown(function() {
        hovered = true;
        $(this).addClass('hovered');
    });
    $(document).mouseup(function() {
        if (hovered === true) {
            $("p").removeClass('hovered');
            hovered = false;
        }
    });
});

Working Example 3

【讨论】：

在您的示例中，isroll 效果因订单而丢失。尝试单击小提琴中的 firefox 文本并拖动。它拖在我发布的小提琴中，现在 iscroll 效果丢失了。请调查一下。感谢兄弟的努力。
不客气！我预计会有其他后续问题。你能告诉我为什么要在一页上加载两个版本吗？为什么不把手机版和桌面版分开呢？你会在两个平台上让它更轻，让生活更轻松吗？
兄弟。包含的所有库都需要让 iscroll 与 jquery mobile 一起使用.. 如github.com/watusi/jquery-mobile-iscrollview
我看到了它们的包含方式——就像你一样。尝试先将它们放在您的本地主机上。我下载了那个图书馆，图书馆里的一切对我来说都很好。你也读过这个吗：github.com/watusi/…
@mithunsatheesh 请检查我更新的答案。 :) 祝你的脚本好运！

【解决方案2】：

我希望我可以确定导致问题的原因，但我不能。我对这个问题的理解是，该 javascript 文件中的某些内容阻止了通常会触发 :active 伪类的默认浏览器操作。

您可以通过在 mousedown/mouseup 上向元素添加和删除类来解决此问题

CSS

.act { color:#000; }
.act:active, .active { color:#FFF; }

$('.act').mousedown(function() {
    $(this).addClass('active');
});

$('.act').mouseup(function() {
    $(this).removeClass('active');
});

这也是一个有效的小提琴： http://jsfiddle.net/zq5AW/3/

【讨论】：

抱歉，没注意到。在看到你的答案后，就为我的答案写了相同的附加解决方案。为你投票。
@Jrod ：兄弟..只有一个问题。当我单击并拖动 firefox 文本时，它会获得悬停效果。但是一旦我摆脱它..悬停效果不会被删除。对不起，如果我错了。
@mithunsatheesh 您可以将 mouseup 事件修改为在文档上，以便任何鼠标向上触发该功能并从 .act 中删除类 active 这是一个示例：jsfiddle.net/zq5AW/5跨度>