如何在 WebKit 浏览器中使用 jQuery 进行 .focus()答案

【问题标题】：How to .focus() using jQuery in a WebKit browser如何在 WebKit 浏览器中使用 jQuery 进行 .focus()
【发布时间】：2011-01-12 17:53:17
【问题描述】：

标题几乎解释了它。请注意，这是一个特定于 WebKit 的问题（至少我已将其范围缩小到这一点，因为 FireFox 绝对没有问题）。此问题已在 Chrome 8.0.552.224 和 Safari 5.0.2 上测试。

我有这个 HTML 结构：

<li class="buttonArea"> <span class="buttonHighlight"></span>
    <a href="#" class="button">PRE-ORDER</a>
    <a href="#" class="buttonTag">Got a Coupon Code?</a>
    <span class="buttonBG"></span> 
    <!-- Rainbow background -->
</li>

我创建了一个 jQuery 函数，它在 a.button 悬停和获得焦点时向它添加一个类。方法如下：

$(document).ready(function () { /* ///// start DOM ready ///// */
    /** Big button hover/active effects **/
    $('a.button').hover(function () {
        $(this).toggleClass('button-hover');
    });
    $('.button').focus(function () {
        $(this).toggleClass('button-active');
        Cufon.replace('.button-active');
    });
}); /* ///// end DOM ready ///// */

增加了按钮悬停类；但是，按钮激活不是。即使我删除了 Cufon.replace 行，它也不起作用。显然，jQuery 网站上已经有一张票提到了这个与 WebKit 相关的问题 (http://bugs.jquery.com/ticket/3332)，但我希望你的天才头脑可以帮助我！

【问题讨论】：

您使用的是哪个 jquery 版本？？
这可能是 jQuery 1.3.x 中的一个错误（当您找到的票被归档时），但在 1.4.x 中已修复；在 Chrome v9.0b 上使用 1.4.4 对我来说适用于其中一个测试用例。您应该在jsfiddle.net 上创建一个测试用例
其实我是用Google API链接jQuery库的：ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
好吧，我在 Chrome 上测试了 jsFiddle 结果，但它不起作用：jsfiddle.net/ZFGbL .. 同样，它使用的是 jQuery 1.4.4，但它不起作用：/

标签： jquery google-chrome safari webkit

【解决方案1】：

我认为你可以替换你的代码 -

$('.button').focus(function() {
    $(this).toggleClass('button-active');
    Cufon.replace('.button-active');
});

通过这个

$('.button').click(function() {
    $(this).toggleClass('button-active');
    Cufon.replace('.button-active');
});

即用点击事件替换焦点事件，它的工作方式类似（在 chrome 中也是如此），因为点击也满足了您对焦点的期望。

【讨论】：

但是一旦按下并释放鼠标，click() 就会添加类。我希望在按下鼠标后立即添加该类；当它被释放时，这个类应该被删除。这就是我使用 focus() 的原因。

【解决方案2】：

无论如何，感谢我的一位好朋友的帮助和一些调整，我们找到了解决方案。这是跨浏览器兼容的，我希望它可以帮助其他人：

$('.button').hover(function () {
    $(this).addClass('button-hover');
    $(this).mousedown(function () {
        $(this).addClass('button-active');
        Cufon.replace('.button-active');
        $(this).mouseup(function () {
            $(this).removeClass('button-active');
            Cufon.replace('.button');
        });
    });
}, function () {
    $(this).removeClass('button-hover');
});

【讨论】：