1

我正在开发一个移动网站。我正在使用 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

但是没有答案。

4

2 回答 2

2

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

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

工作示例

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

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

工作示例 2

更新：

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

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

工作示例 3

于 2012-09-13T08:14:59.963 回答
2

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

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

CSS

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

JS

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

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

这里也是一个工作小提琴：http: //jsfiddle.net/zq5AW/3/

于 2012-09-13T15:32:55.607 回答