How to get clicked element only in stencilJS when shadow is set to true
1
I am getting a problem that when I am setting shadow as true in my component I am getting whole dom when any image(other element too) clicked instead of the element which is clicked.
How can I resolve this issue.
Thanks in advance
shadow-dom stenciljs
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
add a comment |
1
I am getting a problem that when I am setting shadow as true in my component I am getting whole dom when any image(other element too) clicked instead of the element which is clicked.
How can I resolve this issue.
Thanks in advance
shadow-dom stenciljs
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
add a comment |
1
1
1
I am getting a problem that when I am setting shadow as true in my component I am getting whole dom when any image(other element too) clicked instead of the element which is clicked.
How can I resolve this issue.
Thanks in advance
shadow-dom stenciljs
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
I am getting a problem that when I am setting shadow as true in my component I am getting whole dom when any image(other element too) clicked instead of the element which is clicked.
How can I resolve this issue.
Thanks in advance
shadow-dom stenciljs
shadow-dom stenciljs
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
asked Nov 19 '18 at 6:38
Lalit KushwahLalit Kushwah
1,01111125
1,01111125
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369479%2fhow-to-get-clicked-element-only-in-stenciljs-when-shadow-is-set-to-true%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
|
show 3 more comments
0
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
|
show 3 more comments
0
0
0
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
answered Nov 23 '18 at 9:25
Gil FinkGil Fink
28125
28125
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
|
show 3 more comments
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
Thanks @Gil have you tested this code on IE, edge and firefox ?? I mean is currentTarget working on these browsers
– Lalit Kushwah
Nov 24 '18 at 7:44
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
@LalitKushwah, it works on IE, Edge and Firefox - developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
– Gil Fink
Nov 24 '18 at 13:32
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
I am writing the following code and getting the whole selector instead of target element
– Lalit Kushwah
Nov 26 '18 at 4:21
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
@Listen('click') handleClickEvent (event) { console.log('============= 268 =============', event.currentTarget)
– Lalit Kushwah
Nov 26 '18 at 4:22
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
You aren't using the Listen decorator as expected. Listen decorator is used to listen on custom events which are emitted by a Stencil component using the EventEmitter class. In your case in order to wire the event listener you should put the wiring in the render function like I showed in my example.
– Gil Fink
Nov 26 '18 at 6:23
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369479%2fhow-to-get-clicked-element-only-in-stenciljs-when-shadow-is-set-to-true%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
