Mixing
VueJS click doesn't work on mobile, click listener is not detected
0
I'm trying to figure out where the problem is with VueJS on click listener.
So here i have a list of possible language that a user can choose from:
- EN
- FR
- IT
this list is wrapped into a <div> that shows or hide the list by using a click listener, the problem is that it only works on desktop and not on mobile
Here some video i captured to show you where is the problem
Desktop (here is working as expected)
Mobile (here is not working anymore)
And here there is the code i'm now using for the component
<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>As you can see i use the toggleList variable to toggle the language list
and by doing some tests if i click on the <div> it doesn't catch the event
I've even tried other libraries like HammerJS but nothing is working
javascript html vue.js mobile onclicklistener
asked Nov 20 '18 at 19:32
AndreaAndrea
265
add a comment |
0
I'm trying to figure out where the problem is with VueJS on click listener.
So here i have a list of possible language that a user can choose from:
- EN
- FR
- IT
this list is wrapped into a <div> that shows or hide the list by using a click listener, the problem is that it only works on desktop and not on mobile
Here some video i captured to show you where is the problem
Desktop (here is working as expected)
Mobile (here is not working anymore)
And here there is the code i'm now using for the component
<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>As you can see i use the toggleList variable to toggle the language list
and by doing some tests if i click on the <div> it doesn't catch the event
I've even tried other libraries like HammerJS but nothing is working
javascript html vue.js mobile onclicklistener
asked Nov 20 '18 at 19:32
AndreaAndrea
265
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)
– Sumurai8
Nov 20 '18 at 20:09
i tried with@click.nativebut the click is not triggered at all, i don't think is something related to css because i checked it in the inspector
– Andrea
Nov 21 '18 at 9:52
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51
add a comment |
0
0
0
I'm trying to figure out where the problem is with VueJS on click listener.
So here i have a list of possible language that a user can choose from:
- EN
- FR
- IT
this list is wrapped into a <div> that shows or hide the list by using a click listener, the problem is that it only works on desktop and not on mobile
Here some video i captured to show you where is the problem
Desktop (here is working as expected)
Mobile (here is not working anymore)
And here there is the code i'm now using for the component
<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>As you can see i use the toggleList variable to toggle the language list
and by doing some tests if i click on the <div> it doesn't catch the event
I've even tried other libraries like HammerJS but nothing is working
javascript html vue.js mobile onclicklistener
asked Nov 20 '18 at 19:32
AndreaAndrea
265
I'm trying to figure out where the problem is with VueJS on click listener.
So here i have a list of possible language that a user can choose from:
- EN
- FR
- IT
this list is wrapped into a <div> that shows or hide the list by using a click listener, the problem is that it only works on desktop and not on mobile
Here some video i captured to show you where is the problem
Desktop (here is working as expected)
Mobile (here is not working anymore)
And here there is the code i'm now using for the component
<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>As you can see i use the toggleList variable to toggle the language list
and by doing some tests if i click on the <div> it doesn't catch the event
I've even tried other libraries like HammerJS but nothing is working
<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style><template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>javascript html vue.js mobile onclicklistener
javascript html vue.js mobile onclicklistener
asked Nov 20 '18 at 19:32
AndreaAndrea
265
asked Nov 20 '18 at 19:32
AndreaAndrea
265
asked Nov 20 '18 at 19:32
AndreaAndrea
265
asked Nov 20 '18 at 19:32
AndreaAndrea
265
asked Nov 20 '18 at 19:32
AndreaAndrea
265
265
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)
– Sumurai8
Nov 20 '18 at 20:09
i tried with@click.nativebut the click is not triggered at all, i don't think is something related to css because i checked it in the inspector
– Andrea
Nov 21 '18 at 9:52
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51
add a comment |
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)
– Sumurai8
Nov 20 '18 at 20:09
i tried with@click.nativebut the click is not triggered at all, i don't think is something related to css because i checked it in the inspector
– Andrea
Nov 21 '18 at 9:52
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using
@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)– Sumurai8
Nov 20 '18 at 20:09
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using
@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)– Sumurai8
Nov 20 '18 at 20:09
i tried with
@click.native but the click is not triggered at all, i don't think is something related to css because i checked it in the inspector– Andrea
Nov 21 '18 at 9:52
i tried with
@click.native but the click is not triggered at all, i don't think is something related to css because i checked it in the inspector– Andrea
Nov 21 '18 at 9:52
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51
add a comment |
0
active
oldest
votes
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%2f53400274%2fvuejs-click-doesnt-work-on-mobile-click-listener-is-not-detected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53400274%2fvuejs-click-doesnt-work-on-mobile-click-listener-is-not-detected%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
The first thing I would suggest checking is if your click handler is not called, or if it is called twice. You can simply check that by creating a method and using console log for that. You could try to make it a native click handler by using
@click.native="". It is also possible that your styling does weird things with the container div (e.g. all elements are floating/absolute positioned, making the container 0 pixels high under some circumstances)– Sumurai8
Nov 20 '18 at 20:09
i tried with
@click.nativebut the click is not triggered at all, i don't think is something related to css because i checked it in the inspector– Andrea
Nov 21 '18 at 9:52
Not sure in which environment/browser you run your code but it seems to work on jsfiddle jsfiddle.net/50wL7mdz/791807 even on my Moto X phone (using chrome on android). can you share your hammerjs solution?
– mmbrian
Nov 22 '18 at 15:51