Доступ / копирование / клонирование прослушивателей событий элемента (или редактирование lineNumber и sourceName) - PullRequest
Новая
       30

Доступ / копирование / клонирование прослушивателей событий элемента (или редактирование lineNumber и sourceName)

0 голосов
/ 11 февраля 2012

Сценарий

Я пишу расширение для Chrome / userscript, чтобы добавить немного удобства для стороннего сайта.Страница, для которой сделано расширение, имеет несколько элементов, к которым прикреплены click прослушиватели событий (для каждого элемента, без всплывающих окон) через addEventListener (onclick и другие свойства пусты).Мое расширение клонирует (cloneNode) один из элементов и добавляет его в список.

Например, 

<div id="list">
  <div id="d1">A</div>
  <div id="d2">B</div>
  <div id="d3">C</div>
</div>

мое расширение добавит элемент D.

Проблема

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

Тесты

Тест 1

Я проверил прослушиватели событий элементов в инструментах разработчика Chrome и попытался скопировать анонимную функцию в мои новые элементы с помощью addEventListener (не забудьте дублироватьпараметры), но это не сработало.Он выполнил некоторые из ожидаемых действий, но не все из них.

Тест 2

Я попробовал предложение anfilat использовать трюк из этого вопроса .Я вставил script блок, который затем вызывал addEventHanlder для нового узла, и у него действительно был новый обработчик (с sourceName, ссылающимся на сайт - страницу, а не файл .JS - вместорасширение), однако он по-прежнему выдает ошибку переменной not found.

Гипотеза

Я подозреваю, что это проблема домена, потому что обработчик кликов вызывает функцию во внешнем .JS, как указано в sourceName и lineNumber прослушивателя событий, как показано ниже,Обратите внимание, что listenerBody идентичен, но источники отличаются.

Вопрос

Есть ли способ получить доступ, скопировать или клонировать обработчики элемента и / или отредактировать lineNumber и sourceName?

Приложение A: Диаграммы

Рисунок 1 : Обработчики оригинальных элементов, ссылающиеся на .JS на сайте (с небольшими правками имени файла):

Site

Рисунок 2 : обработчики новых элементов, относящиеся к расширению:

Extension

1 Ответ

1 голос
/ 12 февраля 2012

Я написал небольшой рабочий тест.

Сценарий внедрения расширения Crome: 

var myScriptElement = document.createElement('script'); 
myScriptElement.innerHTML =
  'b=document.getElementById("button");' +
  'c=b.cloneNode(true);' +
  'b.parentElement.appendChild(c);' +
  'c.addEventListener("click", function(e){foo("from new button")}, false);';
document.querySelector('head').appendChild(myScriptElement);

test html: 

<html>
<script type='text/javascript' src='test.js'></script>
<body>
<button id='button'>test</button>
<script>
document.getElementById('button').addEventListener('click', function (event) {
  foo('from page');
}, false);
</script>
</body>
</html>

и test.js: 

function foo(text) {
  console.log(text);
};
...