Özer Gül

Meteor event.target and event.currentTarget

2016 05 06 Javascript

In this, topic, I am gonna show you event.target and event.currentTarget difference.

For example we need a data value of clicked element.

This is our template:

<template name="posts">
	<div class="post" data-inf="some_number">
		post content here
		<div class="some_child">
			this is a child div.
		</div>
	</div>
</template>

And we can get inf value when click like this:

Template.posts.events({
	"click .post"(event, instance) {
		var inf = event.target.dataset.inf

		console.log(inf)
	}
});

But something is wrong. If you click some_child content, console.log will write undefined. Because our some_child div doesn’t have inf data attributes.

To solve this problem, we use currentTarget instead of target. So, following codes should work perfectly.

Template.posts.events({
	"click .post"(event, instance) {
		var inf = event.currentTarget.dataset.inf

		console.log(inf)
	}
});

Regards.

Leave a Reply

Your email address will not be published. Required fields are marked *

(c) Özer Gül, css framework w3.css