Является ли x зарезервированным ключевым словом в Javascript FF / Safari, а не в IE? - PullRequest
Новая
       21

Является ли x зарезервированным ключевым словом в Javascript FF / Safari, а не в IE?

1 голос
/ 22 марта 2010

На веб-странице веб-приложения отображалась странная ошибка. Я регрессивно удалил весь код HTML / CSS / JS и пришел к простому и простому коду ниже. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>test</title>

   <script type="text/javascript">
      var TestObj =
      {
         foo: function() {}
      }

      alert(x); //ok displays "undefined"
      var x = TestObj.foo;
      var z = TestObj.foo;
    </script>

</head><body>

   <p onclick='alert(x);'>Click shows function foo!</p>
   <img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'>
   <p onclick='alert(x);'>Click shows function foo!</p>

</body></html>

Это безумие: при нажатии на элементы P строка «function () {}» выводится, как и ожидалось. Но при нажатии на элемент IMG показывает число, как если бы функция x каким-то образом была удалена из памяти или деинстантирована (она даже не показывает x как «неопределенное», а как число).

Чтобы вы могли проверить это быстро, я поместил рабочий тест выше также здесь .

Это можно воспроизвести как на Firefox 3.6, так и на Safari 4.0.4 .

Все работает правильно только в IE7 + .

Я действительно не знаю, мне было интересно, является ли x зарезервированным ключевым словом в JS Firefox / Safari. Спасибо всем, кто мог помочь!

К вашему сведению:

  1. если вы отмените x () на z () все отлично работает во всех браузеры (это еще более безумно меня)
  2. добавление реального изображения в src атрибут не решает проблему
  3. удаление стиля в img не исправляет проблема (я придал стиль изображению только чтобы помочь вам, нажав на изображение Таким образом, вы можете увидеть границу изображения)

Ответы [ 4 ]

6 голосов
/ 22 марта 2010

Ваша проблема с переменной областью, а не в том, что "x" зарезервировано. Объект изображения имеет свойство с именем «x». Это можно увидеть с помощью инструментов разработчика Chrome. Когда вы звоните "оповещение (х);" для объекта изображения область «x» является свойством «x» изображения.

2 голосов
/ 22 марта 2010

Просто чтобы завершить ответы от Дэвида и Дэниела , это поведение вообще не задокументировано, но почти во всех современных браузерах оно работает следующим образом:

Содержимое встроенного обработчика событий становится FunctionBody функции, которую браузер вызывает при запуске этого события.

Цепочка области действия этой функции дополнена элементом, элементом FORM (если он существует и является элементом FORM) и document.

В коде это выглядит примерно так: 

function onclick(event) {
  with(document) {
    with(this.form) {
      with(this) {
        // inline event handler content...
      }
    }
  }
}

Такое поведение может вызывать всевозможные конфликты имен из-за увеличения цепочки областей действия вы не можете быть на 100% уверены в том, на что ссылаетесь, это может быть атрибут самого элемента, атрибут форма элемента, атрибут объекта document или любая глобальная переменная.

Рекомендуемая статья:

1 голос
/ 22 марта 2010

Я не могу найти какую-либо документацию, подтверждающую это, но я предполагаю, что тег <img> обрабатывается специально, и этот объект на самом деле является объектом JavaScript Image, а не обычным элементом DOM.Объект Image имеет свойство x, поэтому ваша ссылка на x с незаданной областью означает Image.x.Если вам нужно глобальное свойство x, просто используйте window.x.

0 голосов
/ 22 марта 2010

Все еще поддерживаемые некоторыми браузерами, до спецификации dom изображения, элементы и элементы области имели только свойства x и y для чтения только для своих координат на странице.

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

Похожие темы

...