Mobile click on body does not fire
up vote
1
down vote
favorite
I have this code
document.body.addEventListener('click', el.clickOutsideEvent)
where el.clickOutsideEvent is well defined. This works impeccably for desktop browsers, even with mobile emulators. However, if I try to run this with an iPhone, the event does not run, unless I tap the logo or something else. Tapping a simple div does not fire the event. I've searched for this for a long while and found some questions, but they were mainly involving jQuery. A frequent suggestion was to put touchstart into the first parameter, but several tries failed.. How should I modify my code?
javascript click smartphone
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
|
show 2 more comments
up vote
1
down vote
favorite
I have this code
document.body.addEventListener('click', el.clickOutsideEvent)
where el.clickOutsideEvent is well defined. This works impeccably for desktop browsers, even with mobile emulators. However, if I try to run this with an iPhone, the event does not run, unless I tap the logo or something else. Tapping a simple div does not fire the event. I've searched for this for a long while and found some questions, but they were mainly involving jQuery. A frequent suggestion was to put touchstart into the first parameter, but several tries failed.. How should I modify my code?
javascript click smartphone
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
1
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25
|
show 2 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have this code
document.body.addEventListener('click', el.clickOutsideEvent)
where el.clickOutsideEvent is well defined. This works impeccably for desktop browsers, even with mobile emulators. However, if I try to run this with an iPhone, the event does not run, unless I tap the logo or something else. Tapping a simple div does not fire the event. I've searched for this for a long while and found some questions, but they were mainly involving jQuery. A frequent suggestion was to put touchstart into the first parameter, but several tries failed.. How should I modify my code?
javascript click smartphone
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
I have this code
document.body.addEventListener('click', el.clickOutsideEvent)
where el.clickOutsideEvent is well defined. This works impeccably for desktop browsers, even with mobile emulators. However, if I try to run this with an iPhone, the event does not run, unless I tap the logo or something else. Tapping a simple div does not fire the event. I've searched for this for a long while and found some questions, but they were mainly involving jQuery. A frequent suggestion was to put touchstart into the first parameter, but several tries failed.. How should I modify my code?
javascript click smartphone
javascript click smartphone
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
asked Nov 9 at 14:56
Lajos Arpad
27.2k1861116
27.2k1861116
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
1
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25
|
show 2 more comments
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
1
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
1
1
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25
|
show 2 more comments
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',
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%2f53228122%2fmobile-click-on-body-does-not-fire%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53228122%2fmobile-click-on-body-does-not-fire%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
Have you looked at the documentation provided by apple concerning event handling? It might have something to do with ios not bubbling events upward in the past, but I'm not certain if that still applies these days. Is there any other way to bind the event closer than directly onto the body? I presume the clickOutsideEvent is like a popover you want to close when the user taps outside of the popover? If that is the case, I make my popovers fullscreen with a transparent background so that any clicks visually outside of the popover, are in facts still delegated to the popover itsself.
– Shilly
Nov 9 at 15:09
@Shilly there is a div inside the body. I tried if (!document.querySelector("body > div").onclick) document.body.querySelector("body > div").onclick = ''; document.querySelector("body > div").addEventListener('click', el.clickOutsideEvent); No luck
– Lajos Arpad
Nov 9 at 15:13
In the past you had to do like CSS hacks to change the pointer, to flag the div as clickable, to make the click event bubble up to the body. But i thought they fixed those things. :x What does the clickOutsideEvent handler do? Maybe there's alternatives to events.
– Shilly
Nov 9 at 15:15
@Shilly I have a search bar which needs to be shown when a search button is clicked and hidden if clicked anywhere else. There is no alternative, as I need this to be done inside a vue directive. I am completely new to vue, but with great difficulty managed to make the directive work, yet, I have a problem with the "click anywhere else".
– Lajos Arpad
Nov 9 at 15:20
1
gravitydept.com/blog/js-click-event-bubbling-on-ios
– Shilly
Nov 9 at 15:25