I am facing a strange problem on iOS devices.
When clicking on buttons/links in an overlaying container, the element below fires also a click event. I have a "filter" button that opens an overlaying div with all the filter options. The closing button on the overlay is located directly over the button, that triggers the overlay. When I click on the close button, the overlay closes, and with a small delay, a click on the filter button is executed again and opens the overlay.
This also happend when I build my mobile menu, where I had a burger button on the top right which opens my mobile menu. The closing button was located where the burger button was. When clicking on the closing button, the click on the burger button is executed again and opens the menu.
I tried to bind a stopImmediatePropagation() to the buttons, but this doesn't work out. This only happens on iOS, Android and Desktop is fine. The functionality of the overlays comes from my used e-commerce system (Shopware 6). It is not only happening with buttons, but with other elements like divs and spans with a functionality to hide/close overlays.
Any ideas how to get rid of this?
Best regards,
Alex
I could solve it with fastclick.js
https://github.com/ftlabs/fastclick
Not what is designed for, but fortunately it solved the click issue on iOS.
Related
I'm trying to put this dropdown menu on my website:
*https://codepen.io/sean_codes/pen/WdzgdY*
My website is totally mobile-friendly.
When I click to open the menu on the phone, it opens normally, but when I click the second time, it doesn't close. It closes only when I click away.
How do I put that menu to close when I click the menu icon a second time?
It is best to avoid the usage of hover on mobile devices. You will first have to check if the browser supports it via #media and create some sort of fallback in case it does not.
Try using input html element and set the type to checkbox for your dropdown buttons and toggle your dropdown with checked.
No need to use javascript for this.
I have a main page with a button that opens an overlay with item details that consist of several buttons (eg. one with phone number).
My issue is that when user accidentally doubles clicks on the main page button, the first click will be corrected on the main page but the second click may point to the button with a phone number from the overlay that was opened with the first click. So the user is immediately forwarded to phone App, although he/she wanted to open just the overlay.
Safari has this behaviour covered but the issue is present in Chrome.
The only solution that comes to my mind is setTimeout to all buttons on the overlay. Is there a better way to handle such issue?
P.S. It's not possible to move overlay buttons so their position is not similar with the main page button.
You can use the on ondblclick (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondblclick) to return false but it seems more like a UX problem where your buttons are exactly at the same position.
Though if the user manages to click two buttons in a row it’s probably not considered a proper double click so the first solution might not work.
I would really suggest to move the second button to another position within the modal or to move the modal itself.
Had to do it with a timeout
//onOverlayOpen
this.overlay.classList.add('overlay--blocked');
setTimeout(() => {
this.overlay.classList.remove('overlay--blocked');
}, 350);
//CSS
.overlay--blocked {
pointer-events: none;
}
For a project I'm building an safari extension. One part of the extension contains the popover part.
When someone clicks the extension toolbar button, a popover window scrolls down to display some information.
This is working as expected but now the following:
The plan is to make some sort of companion popover, so when the user clicks inside a webpage, some elements are selected and displayed in the popover.
The problem is the popover closes when one clicks next to the popover window while it should be left open.
Does anybody know a way to keep the popover window open while browsing pages?
There is a function on the window object:
window.onblur
Which fires an event when the popover closes. Is there a way to cancel the closing operation?
I have created one page, in which on right clicking on some button a modal appears.
When I right click on the modal it doesn't seem to work.
So far, what I got to know is, the mouse click is taken by the UI control which comes underneath that modal and listening to all mouse events and that UI control VNC.
I can click on the part of the modal, which is not above that control.
Is there any way I can force modal to take all mouse events when in focus?
What I want to do is just right click and copy the text from that modal.
Thanks in advance,
Regards,
Ganesh
Just called RFB's _rfb.get_keyboard().ungrab() method when modal is shown and was pretty done.
I'm using angular for a mobile web project. I have a basic share button, when clicked a share modal pops up. The share modal's Close button lays on top of (higher z-index) the actual share button. The share modal is generated from external HTML so I cannot use an ng-click directive. As a work around I use the following:
document.querySelector('#shareContent .shareClose').addEventListener('touchend', function( e ){
e.stopPropagation();
$scope.$apply(function(){
$scope.showShareOverlay = false;
})
console.log("closing the share", $scope.showShareOverlay)
})
My issue is that when I touchend the .shareClose button, the modal closes for a brief moment before showing again. Somehow the touch event is being transferred to the below share button to launch the modal again. Is there anyway to prevent the event from bleeding through to the share button?
I had a similar issue with the Android stock browser. Whatever was underneath the close button for my modal would also get clicked shortly after tapping the close button.
Using the fastclick library on the app stopped this behaviour from happening, presumably due to the specific way it handles click events.