(click) with clicked element as parameter

Ionic Framework ionic-v3
1

Okay, coming from web development, can anyone tell me how to reproduce the following in Ionic:

<div onclick="myFunction(this);"></div>

This will send the clicked element to my function, so I can get a hold of it and manipulate it using JS.

Thanks!

1 Like
2

Your HTML:

<button ion-button (click)="doSomething($event)> Click Me </button>

TS Function:

/** This function will get all the (click) event data including the element that was clicked*/
doSomething(event: any){
  console.log(event);
}
1 Like
3

Thanks for the reply.

Lets says I have some elements like:

<div (click)="myFunction($event);">
<span>Foo</span>
<span>Bar</span>
</div>

It will get the event on the target i hit, so it might be the Foo span og the Bar span or even the div itself.

I see that you use a ion-button, but what if I want my click to be on a custom element, containing different children, because it is not a default iOS/Android button.

3 Likes
4

Include tappable directive

<div tappable (click)=“myFunction($event)”>

Edit: misread your second post. Try importing ViewChild to your component and adding it to the specific element you’d like to access. A google search or a look at Ionic docs will show you how to capture the element with @ViewChild

<span #span1>Foo</span>

and in your function on component.ts

myFunction() {
  console.log(this.span1);
  // or whatever name you assign to it in    component 
  }

Using ViewChild eliminates the necessity of using $event

5

It will be the div itself because the (click) event is binded to the div, not the child spans. However, the ‘$event’ parameter will carry all the target’s data (div) including its child elements (spans).

The ion-button was just an example, you can bind the click event on any other element as far as I know.

1 Like
6

This is bad practice when it comes to dynamic data.

7

The target of the $event will be the spans if that’s what you tapped on. If you want the div you’d have to backtrack using parents in $event. No it won’t be the div itself, unless that’s what you click on. If you click on the span boxes it won’t be.

8

You right about the spans being possible targets, but you can tap on the div container without affecting the spans, in that case, the div will be the target. Also you wouldn’t need to backtrack if the spans are the target. Like I said 8 months ago :frowning: , the $event will carry all the data of the element it’s bound to including div { currentTarget } itself.

Create a demo if you wanna see it in action…

9

Yeah but like, users are gonna tap on the spans instead of the div at some point. We need a foolproof solution to work around it.
What I found elsewhere is event.Target.closest('div').* which seems to work well.

10

Okay, firstly the Event Object’s target not Target's property doesn’t have a closest() function, look it up. Wherever you ‘found’ that, it was supposed to be $(event.target).closest(). It’s the JQuery HTMLElement that has that function. This isn’t JQuery.

Secondly, the currentTarget here will ALWAYS be the div no matter how many elements are inside that div, no matter which one of those elements the user clicks/taps. You don’t need to navigate the DOM.

Here, some docs on the JavaScript Event Object, read them and let this go okay.

Goodluck