clickTrack
подключает прослушиватель событий click
и возвращает объект data
, который будет обновляться всякий раз, когда происходит событие щелчка, поэтому вы должны вызывать clickTrack
только один раз.
Прямо сейчас вы вызываете его снова после вашего события щелчка, поэтому он создает дополнительный прослушиватель click
и возвращает новый пустой объект data
.
Вы также захотите использовать e.target.text
для текста и получить имена классов, вызвав split(' ')
на e.target.className
:
function clickTrack() {
const data = {};
document.addEventListener('click', function clicked(e) {
if (e.target.matches('a')) {
e.preventDefault();
data['click.Classes'] = e.target.className.split(' ');
data['click.ID'] = e.target.id;
data['click.Destination'] = e.target.href;
data['click.ElementText'] = e.target.text;
}
}, false);
return data;
}
describe('Click Tracking', () => {
test('Clicking on an a tag will collect its information', () => {
const data = clickTrack();
document.body.innerHTML = '<a class="j1 j2 j3" id="j" href="http://www.google.com/">Jest</a>';
document.getElementById('j').click();
expect(data).toEqual({
'click.Classes': ['j1', 'j2', 'j3'],
'click.Destination': 'http://www.google.com/',
'click.ElementText': 'Jest',
'click.ID': 'j'
}); // Success!
});
});
Добро пожаловать в мир JavaScript!:D
Вы блуждали в область объема JavaScript и закрытия.
Для короткого ответа:
this.bar()
выполняется под объемом нечто, (поскольку это относится к нечто),
var barf = this.bar;
barf();
выполняется под глобальной областью видимости.
this.bar в основном означает:
выполните функцию, на которую указывает this.bar под объемом этого (нечто). Когда Вы скопировали this.bar, чтобы блевать, и работать, блюют. JavaScript, понятый как, работает, функция, на которую указывают, блюют, и так как существует не это, это просто работает в глобальной области видимости.
Для исправления этого можно измениться
barf();
к чему-то вроде этого:
barf.apply(this);
Это говорит JavaScript обязывать объем этого блевать прежде, чем выполнить его.
Для событий jQuery необходимо будет использовать анонимную функцию или расширить связывать функцию в прототипе для поддержки обзора.
Для большего количества информации:
Существует хорошее объяснение на this
ключевое слово в JavaScript, доступном в QuirksMode.
Вы могли бы найти это:
Управление значением 'этого' в событии jQuery
или это:
http://www.learningjquery.com/2007/08/what-is-this
Полезный.
Можно использовать Function.apply
на функции для установки, что this
должен относиться к:
$("#thing").after($("<div>click me</div>").click(function() {
barf.apply(document); // now this refers to the document
});
Получите книгу: JavaScript: Хорошие Части.
Кроме того, читайте так, как Вы можете Douglas Crockford http://www.crockford.com/javascript/
Это вызвано тем, что это всегда - экземпляр, к которому присоединена функция. В случае EventHandler это - класс, который инициировал событие.
Можно помочь Вашему сам с анонимной функцией как это:
function foo() {
var obj = this;
$("#thing").after($("<div>click me</div>").click(function(){obj.bar();}));
}
foo.prototype.bar = function() {
alert(this);
}