Создать двойную функцию HTML-ссылку URL?

Question

Проблема:

У вас есть обычный набор URL-ссылок на HTML-странице, например ::100100

<a href="/foo/bar">Foo Bar</a>

Вы хотите создать функцию JavaScript таким образом, чтобы при щелчке любых ссылок HTML вместо браузера клиента, переходящего по этому новому URL-адресу "/ foo / bar", вместо этого выполнялась функция JavaScript ( например . Это может, например, сделать Ajaxian вызов и загрузить данные HTML без необходимости перезагрузки страницы) .

Однако, если JavaScript отключен ИЛИ spider сканирует сайт, UTL-ссылки поддерживаются изящно.

Возможно ли это? Это уже существует? Какой обычный подход?

РЕДАКТИРОВАТЬ 1:

Это отличные ответы!

Просто ответ на вопрос:

Если пользователь нажимает кнопку «Назад» ИЛИ кнопку «Вперед», это, естественно, прерывается (так как при этом происходит возврат к последней физической странице, на которой он находился, а не к загруженной).

Есть ли способ (кросс-браузер) поддерживать кнопки назад / вперед?

(например, создать массив ссылок, нажимаемых и перебираемых по кнопкам браузера, и использовать массив для навигации)?

Answer 1

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>

<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

Если Javascript отключен, ссылка ведет себя нормально.

В этом случае, если your_function() не возвращает false, ссылка также будет переходить при нажатии.

Чтобы предотвратить это, либо заставьте your_function() вернуть false, либо добавьте return false; сразу после вызова функции в атрибуте onclick:

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
        return false;
    }
</script>

<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

Или:

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>

<a onclick="your_function(); return false;" href="/foo/bar">Foo Bar</a>

---

Использование element.addEventListener ()

С поведением привязки по умолчанию после нажатия:

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function() {
            alert('clicked');
        }, true); 
    }, true);
</script> 

<a id="your_link" href="/foo/bar">Foo Bar</a>

Без:

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function(event) {
            event.preventDefault();
            alert('clicked');
        }, true); 
    }, false);
</script> 

<a id="your_link" href="/foo/bar">Foo Bar</a>

Answer 2

Учитывая текущие API HTML и W3C, я бы пошел на:

<script src="linkify.js"> </script>

в разметке, где linkify.js содержит что-то вроде:

window.onload= function() {
    document.addEventListener('click', function(ev) {
        ev.preventDefault();
        var el = ev.target;
        if (el.tagName === 'A') {
            // do stuff with el.href
        }
    }, false);
};

См. Например http://jsfiddle.net/alnitak/nrC7G/, или http://jsfiddle.net/alnitak/6necb/ для версии, которая не использует window.onload.

Обратите внимание, что в этом коде используется функция прослушивателя single , зарегистрированная в объекте document, которая будет действовать на каждый тег <A> на странице, которая не перехватывает щелчки для себя.

Answer 3

function do_whatever (e)
{
   e.preventDefault ();

   // do whatever you want with e.target
}

var links = document.getElementsByTagName ("a");

for (var i=0; i<links.length; ++i)
   links[i].addEventListener ('click', do_whatever);

http://jsfiddle.net/bTuN7/

Все сделано внутри скрипта, и если JavaScript не будет работать, не повредит.

Если вы думаете об AJAX, то вам нужнознаю, что гуглбот пытается его разобрать.http://www.youtube.com/watch?v=9qGGBYd51Ts

Answer 4

Используйте атрибут onclick:

<a href="/home.html" onclick="javascript: performFunction(this); return false;">click?</a>

return false предотвращает поведение по умолчанию, однако при отсутствии JavaScript ссылка будет следовать.

Answer 5

Существует довольно много методов, таких как этот: http://www.malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/

Помните, однако, что благодаря хорошо настроенному серверу и кешированию вы не достигнете большой производительности с Ajax Load.

Answer 6

Вы можете кодировать как:

$('a').click(function() {
    doSomethingWithURL($(this).attr('href'));
    return false;
});

JavaScript не выполняется в случае, если он отключен или если какой-то веб-сканер, поэтому, с моей точки зрения, это предпочтительнее.