2011-01-30 2 views
7

Я не собираюсь начинать дебаты.# или javascript: void (0)?

Если мы хотим использовать событие onClick, мы должны определенным образом отключить href для запуска. - Это верно ?

Если это правильно, я считаю, что javascript:void(0) имеет то преимущество, что НЕ запускает поведение прокрутки.

Правильность этих допущений?

Примечание: Я не собираюсь искать химера, но мой квест о поиске пути к кнопкам стиля в кросс-браузерной способом, без доступности попадания (на всех), без хаков и причудами.

+0

@delnan: Он прокручивает к вершине обычно. – configurator

+1

просто не использует событие onclick внутри html. –

+0

@delna: 1) Ваша страница должна иметь вертикальную высоту, которая должна включать полосу прокрутки; 2) поместите ваш href = "#" в том же месте в середине вашей страницы, прокрутите вниз, чтобы ваш href = "#" оставался сверху вашего окна просмотра. 3) Нажмите. ;) – MEM

ответ

16

Если вы хотите предотвратить, следуя ссылке, вы должны добавить event.preventDefault() в ваш обработчик кликов (event.returnValue = false; в IE).

Кажется, что вы сразу после смотрите ссылки, а не ее функциональность (или цель). Если это так, вы можете использовать button с CSS для его стиля.

Следует избегать наличия реальных ссылок с содержимым href # или javascript:void(0).

Дальнейшее объяснение:

Используя ссылку только, чтобы иметь что-то «интерактивное» не хорошо. Ссылка имеет четкий синтаксический смысл. Поскольку вы можете назначить обработчик события click для каждого элемента, для этого вы можете использовать любой другой элемент.

Синтаксически наиболее правильный (imo) будет button, так как вы все равно сможете использовать tab для навигации по ним. Вы можете укладывать их с помощью CSS, чтобы сделать их похожими на ссылку, если вы хотите (see this example)

Теперь о предотвращении действия по умолчанию:.

Предполагая, что у вас есть нормальной связи с надлежащим href значения и вы хочет перехватить щелчок. в обработчик щелчка присвоенным элемента, например

link.addEventListener('click', function(event){ 
    // some code 
    event.preventDefault(); 
}, false); 

с использованием event.preventDefault() предотвращает действие по умолчанию, в случае ссылки, является следующий URL-адрес.

(приведенный выше код является примером для W3C совместимых браузеров, IE немного отличается)

+0

Упорядочить полный пример вышеуказанного? Где должен размещаться event.preventDefault? – MEM

+2

@Felix: добавлены мои ссылки на ваш ответ и удалены мои собственные; надеюсь, что вы не против ... – Christoph

+0

@ Кристоф: Спасибо, милый ваш ход! –

0

Если есть иметь HREF, использовать javascript:void(0), потому что это не имеет никакого эффекта, в отличие от #. Но вы не только может иметь HREF вообще, дать aclass, чтобы сделать его похожим на ссылку, например:

/* in stylesheet */ 
a.scriptlink { 
    color: blue; 
    text-decoration: underline; 
    cursor: pointer 
} 

<!-- in HTML --> 
<a class="scriptlink" onclick="whatever"> 
+0

Не уверен в гарантии кросс-браузера, если мы решили удалить атрибут href. - Может ли кто-нибудь подтвердить это? :-) – MEM

+4

Ссылка без адреса не будет иметь фокуса, что может повлиять на доступность. Просто один недостаток этого решения. –

+0

@ Платный кальмар - хватит для меня. :) – MEM

0

Я предпочитаю JavaScript: недействительным (0) в течение # потому, что он не изменяет адресную строку путем размещения там # (что может повлиять на любые будущие скрипты, которые используют/изменяют URL-адрес).

Но лучше, чем они оба, я предпочитаю, чтобы функция onclick возвращала false (поэтому она вообще не перемещается), а затем помещает URL-адрес, который приведет к тому же действию, что и щелчок. Например, скажем, нажатие ссылки загружает некоторый контент в div 'mainArea'. Затем URL-адрес будет загружать всю страницу, причем эта mainArea заполняется одной и той же вещью. Преимущество этого заключается в том, что если они щелкнут правой кнопкой мыши по URL-адресу и адресу «Копировать адрес» или «Открыть в новой вкладке», он все равно работает.

<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a> 
+0

Интересно, почему никто не прокомментировал предложение Parched Squid ... Даже при нажатии кнопки «открыть на новой вкладке» это хороший вариант, который, согласно случаю, должен иметь пользователь. (абзац). В тех случаях, когда происходит клик, и пользователь остается на одной странице, полный URL-адрес должен быть тем, на котором мы фактически находимся? Это оно? – MEM

0

Если вы хотите разделить разметку и скриптинг, вы можете также рассмотреть возможность делегирования событий для настройки обработчиков событий.

Многие фреймворки Javascript (например, jQuery) снабжены абстракциями между браузерами, чтобы сделать это менее беспокойным; из-за NIH-синдрома, я покачал my own solution.

Полный пример может выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" 
    src="http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/capture.js"> 
    </script> 
    <script type="text/javascript"> 
// un-hide elements 
document.documentElement.className = 'js'; 

// use event-delegation to capture click-events 
capture('click', '.clicky', function(event) { 
    alert(this.title); 
    return false; 
}); 
    </script> 
    <style type="text/css"> 
/* display element only if scripting is enabled */ 
.clicky { display: none; } 
.js .clicky { display: inline; } 
    </style> 
</head> 
<body> 
    <!-- link shouldn't be user-accessible; nevertheless, direct user to 
    error page --> 
    <div> 
    <a href="no-js.html" class="clicky" title="clickety-click">click me</a> 
    </div> 
</body> 
</html> 
Смежные вопросы