jquery - 如何在 WebKit 浏览器中使用 jQuery .focus()

Question

标题已经解释了这一点。请注意，这是一个特定于 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 悬停在其上方以及焦点被聚焦时，它会向 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 ///// */

添加了button-hover类；然而，按钮事件不是。即使我删除 Cufon.replace 行它也不起作用。显然，jQuery 网站上已经有一个票证提到了这个与 WebKit 相关的问题 ( http://bugs.jquery.com/ticket/3332 )，但我希望您的天才头脑可以帮助我!

Answer 1

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

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

按此

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

即用单击事件替换焦点事件，它的工作方式类似(在 Chrome 中也是如此)，因为单击也满足您对案例中焦点的期望。