Как сделать .focus (), используя jQuery в браузере WebKit - PullRequest
Новая
       5

Как сделать .focus (), используя jQuery в браузере WebKit

2 голосов
/ 12 января 2011

заголовок в значительной степени объясняет это.Обратите внимание, что это проблема, связанная с 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),, но я надеюсь, что ваши гениальные умы могут мне помочь!

Ответы [ 2 ]

0 голосов
/ 12 января 2011

В любом случае, благодаря помощи моего хорошего друга и некоторой подстройке, мы нашли решение. Это совместимо с различными браузерами, и я надеюсь, что это поможет кому-либо еще: 

$('.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');
});
0 голосов
/ 12 января 2011

ну, я думаю, вы можете заменить свой код - 

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

этим 

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

т.е. замените событие фокуса на событие клика, и оно будет работать аналогично (в том числе и в Chrome), потому что щелчок также удовлетворяет вашим требованиям, что вы ожидаете от фокуса в вашем случае.

...