如何使用jQuery在WebKit瀏覽器中使用.focus（）

標題幾乎可以解釋它。請注意，這是一個WebKit特定的問題（至少我已經縮小到了這個範圍，因爲FireFox完全沒有問題）。此問題已在Chrome 8.0.552.224和Safari 5.0.2上進行了測試。如何使用jQuery在WebKit瀏覽器中使用.focus（）

我有這樣的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），但我希望你的天才頭腦能夠幫助我！

來源

2011-01-12 cr0z3r

你正在使用jQuery的版本?? – Alpesh

這可能是jQuery 1.3.x中的一個bug（當你找到的票據被提交時），但在1.4.x中修復;在Chrome v9.0b上使用1.4.4可以爲我提供其中一個測試用例。您應該在http://jsfiddle.net上創建一個測試用例 – Phrogz

實際上，我正在使用Google API鏈接到jQuery庫：http://ajax.googleapis.com/ajax/libs/jquery/1/jquery。 min.js – cr0z3r

無論如何，由於我的一位好朋友的幫助和一些調整，我們找到了解決方案。這是跨瀏覽器兼容，我希望它可以幫助其他人：

$('.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'); 
});

來源

2011-01-12 20:57:49 cr0z3r

以及我認爲你可以代替你的代碼 - 此

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

即

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

與點擊事件代替焦點事件，它同樣會工作（在Chrome瀏覽過），因爲點擊也滿足您的要求是您期望的重點。

來源

2011-01-12 18:35:17 Alpesh

但是一旦鼠標被按下並釋放，click（）將添加該類。我希望在按下鼠標時添加該類;當它被釋放時，該類應該被刪除。這就是爲什麼我使用焦點（）。 – cr0z3r

如何使用jQuery在WebKit瀏覽器中使用.focus（）

回答

相關問題