Прогрессивное улучшение HTML-меток в jQuery

Question

Я написал jQuery, который должен найти определенный тег <a> и изменить его поведение.Перед загрузкой jQuery тег <a> имеет атрибут href, который указывает на другую страницу.Я использую jQuery, чтобы изменить поведение тега <a>, чтобы вместо указания браузеру загрузить эту другую страницу, вместо этого он запускает javascript, который динамически загружает содержимое в <div>, который расположен в месте расположенияуказатель мыши.

Так, например, у меня есть следующее: <a class="funk" href="http://example.com/page2.html">Link</a> <div class="hidden bubble">Load this instead.</div> Запущенный мной jQuery делает следующее: <pre> $(document).ready(function(){ $('.bubble').hide() $('.bubble').removeClass('hidden'); $('.funk').attr('href', '#');</p> <pre><code> $('.funk').click(function(e){ $('.bubble').show(); })

})

Проблема, с которой я столкнулся: Всякий раз, когда пользователь нажимает на ссылку, браузер воздействует на атрибут href="#" и переносит прокрутку браузера в верхнюю часть страницы.Каков наиболее «правильный» способ сделать мой сайт таким, чтобы браузер вообще не прокручивал его, а просто выполнял код jQuery, который я написал для события click?

Answer 1

Пусть функция «click» вернет false.Это отменяет событие, и браузер не переходит по ссылке.В этом случае вы даже можете присвоить атрибуту href его исходное значение.

$('.funk').click(function(e){
    $('.bubble').show();
    return false;
//--^
})

Чтобы сохранить данные, вы можете явно отменить событие:

e.preventDefault(); // no default action
e.stopPropagation(); // event doesn't bubble up or down in the DOM

Answer 2

Добавьте это к вашей функции клика:

$('.funk').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.bubble').show();
});

Это будет делать то, что подразумевается под именами методов.

Answer 3

Звоните e.preventDefault() в обработчике кликов.http://api.jquery.com/event.preventDefault/