19 апреля 2012 г.

Javascript, OnClick и перескакивание браузера

Иногда Javascript просто поражает своими возможностями, а иногда становится действительно печально от проблем с ним.
С одной из таких проблем можно столкнуться абсолютно в любом Web-приложении, независимо от технологии реализации. Речь идет о странном поведении браузера при щелчке по ссылке, которая должна выполнить некий javascript-код. К кнопкам это не относится, и можна использовать их, но иногда именно верстальщик ставит условия )))

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

   1:  <html xmlns="http://www.w3.org/1999/xhtml">
   2:   
   3:  <head>
   4:  <title>Untitled 1</title>
   5:   
   6:  <script type="text/javascript">
   7:      function DoSomething()
   8:      {
   9:          alert('Hello!');
  10:      };
  11:  </script>
  12:  </head>
  13:   
  14:  <body>
  15:  <a href="#" onclick="DoSomething();">Link</a>
  16:  </body>
  17:   
  18:  </html>

Если нажать на ссылку, то выполниться наш javascript, все пройдет по-плану, и на первый взгляд будет совсем непонятно о чем я тут рассказываю.
НО! Есть один неприятный момент - если перед ссылкой будет много текста либо других элементов (например ссылка далеко внизу страницы, и к ней нужно немножко скролить окно), то после выполнения скрипта по onClick браузер автоматом переместится в самый верх страницы, в следствии чего ссылка потеряется из виду. Проверьте сами на примере.

Проблема ясна. Теперь о ее решениях.
Первым костылем вариантом для меня был следующий способ написания ссылки:
<a href="javascript:DoSomething();">Link</a>

Такой вариант синтаксиса решает нашу проблему где-то на 85-90%. Остальное - это какие-то специфические моменты, при которых такая ссылка просто напросто отказывается работать. Например, такой баг часто встречается при использовании JQuery-вских диалогов. В них подобная ссылка не всегда работает.

Теперь о главном супер-решении, с которым проблем пока я не нашел.
Встречайте:

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

void(0) - "заглушка" против перескакивания браузера.

При таком варианте синтаксиса ссылки, она будет (должна) корректно работать во всех случаях, причем не делая никаких подлостей в виде перескакивания страницы вверх.