Почему не работает следующий встроенный OnClick, когда id = "pattern" в Chrome? - PullRequest
3 голосов
/ 15 июня 2011

Это, наверное, что-то простое, что я пропускаю, но мой гугл-фу не показывает ничего, что могло бы объяснить причину. Возьмем, например, следующий фрагмент (пока игнорируем, что встроенный js обычно считается плохой практикой):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>
    </title>
</head>
<body> 
    <form action="">
      <div>
        <input type="text" id="pattern" value="foobar">
        <input type="button" value="Alert" OnClick="alert(pattern.value);">
      </div>  
    </form>
</body> 
</html>

Выше будет напечатано предупреждающее сообщение «foobar» в IE8 и Firefox 3, но Chrome выведет «undefined». Изменение pattern на что-то еще, например pattern_, приведет к выводу 'foobar' для всех трех браузеров, как и ожидалось.

Является ли pattern зарезервированным словом или именем, используемым для одной из встроенных библиотек js? В чем причина того, что это не работает в Chrome?

Ответы [ 2 ]

4 голосов
/ 15 июня 2011

Поскольку внутренне упомянутые браузеры присоединяют элементы DOM как Объекты к глобальному пространству имен (window). Таким образом, объект с id="xyz" также может быть адресован как window.xyz или даже как xyz. Я полагаю, что Chrome этого не делает.

Также проверьте мой SO-вопрос об этом, особенно выбранный ответ.

[ edit ] после комментария: он действительно связан с Chrome (webkit) и может иметь какое-то отношение к тому, что я нашел здесь . См. Также quirksmode (найдите на странице 'pattern', как это выглядит в HTML5 pattern - это атрибут input, поэтому я могу представить, что он мешает идентификатору с тем же именем)

1 голос
/ 15 июня 2011

Не используйте глобальные переменные для доступа к элементам DOM по id.Для этой цели существует document.getElementById(...), а еще лучше - функция селектора почти в любой библиотеке / среде js (например, $('#yourid') в jQuery, $('yourid') в Prototype и т. Д.).Они гарантируют вам кросс-браузерную поддержку, в то время как глобальные значения могут различаться в зависимости от браузера.

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