Понимание HTML-тега привязки - PullRequest
Новая
       22

Понимание HTML-тега привязки

0 голосов
/ 09 октября 2010

Давайте начнем со следующего примера:

Создайте три страницы в одном каталоге: test.html index.html

Ваш test.html: 

<html>
 <head>
  <script>
   function test()
   {
    alert('Going to google.com?');
    window.location="http://google.com";
   }
  </script>
 </head>
 <body>
  <a href='' onclick="test();">google.com</a><br/>
  <input type="button" value="google" onclick="test();" />
  <a href='' onmouseover="test();">google.com</a><br/> 
 </body>
</html>

Теперь проверьте страницу test.html в IE, а также в Firefox или Crome.

Вы заметите следующие моменты:

  1. Кнопка работает отлично.
  2. Первая гиперссылка работает по-другомув IE и другом браузере.В IE он возвращает нас на страницу index.html, тогда как в Firefox он остается на той же странице.
  3. Для первой гиперссылки оконное расположение не удается.
  4. Вторая гиперссылка, на которую вы не можете нажатьто, что при наведении мыши на событие сначала будет срабатывать, и оно отлично работает!

Почему?

Мой главный интерес - 3-я точка, поскольку она даже дает нам предупреждение, window.locationтерпит неудачу.

Ответы [ 2 ]

3 голосов
/ 09 октября 2010

Событие JavaScript запускается, устанавливается window.location, затем запускается действие по умолчанию для ссылки, и браузер переходит к '', что (IIRC) разрешается как текущий URI.

Это тот же эффект, который вы получаете, если щелкнуть ссылку, а затем быстро щелкнуть другую ссылку. Браузер не успевает перейти к первому до получения инструкции перейти ко второму, и он переходит ко второму. Если вы задерживаете возврат функции (помещая предупреждение в секунду), это дает достаточно времени для запроса первого URL-адреса, чтобы его можно было посетить вместо второго.

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

onclick="test(); return false;"
1 голос
/ 09 октября 2010

Попробуйте это: 

<html>
 <head>
  <script>
   function test()
   {
    alert('Going to google.com?');
    window.location="http://google.com";
    return false;
   }
  </script>
 </head>
 <body>
  <a href='' onclick="Javascript:return test();">google.com</a><br/>
  <input type="button" value="google" onclick="Javascript:return test();" />
  <a href='' onmouseover="Javascript:return test();">google.com</a><br/> 
 </body>
</html>
...