Прогрессивное улучшение 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, который я запускаю, делает следующее:

$(document).ready(function(){
        $('.bubble').hide()
        $('.bubble').removeClass('hidden');
        $('.funk').attr('href', '#');


    $('.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/