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;
}
Related
I've searched for hours, but I couldn't find a solution for this.
window.onbeforeunload = warn;
This doesn't work:
function warn (e)
{
var destination = e.href;
alert(destination );
}
Okay, so to clear the things. If the user clicks on a link on the page itself, it is easy, because you can add an eventhandler to all of the links onclick event, but. I want to catch the address, what the user types into the url box of the browser.
Because it can't be done. The new location is private/sensitive information.
Nobody wants you to know which sites they visit when they leave your site.
If you just want to see what link destination, you can use :
document.activeElement.href
But getting the address line destination is not possible.
I've heard of solutions where they fire off an event if the mouse moves up to the address line (to warn the user that there are unfinished processes that have not been dealt with), but this sort of hack I would never do.
Kaze's answer is an interesting approach, but looking at the element focus when the page is navigated away from isn't really reliable. Partly because there is a delay between the link click and the navigation away from the page (during which time the user may move focus to some other element, but also because a link may be focused (eg. by keyboard control, or mousedown-without-click) without actually being used to navigate away from the page. So if you focused a link then closed the window, it'd think you were following the link.
Trapping onclick for every link on the page (plus onsubmit on every form) is slightly more reliable, but can still be fooled due to the delay. For example you click a link, but then before the new page starts loading hit the back button (or press Escape). Again, if you close the window it thinks you're following the link.
I want to catch the address, what the user types into the url box of the browser.
There is no way that will ever happen. It is an obvious privacy no-no.
I've searched for hours, but I couldn't find a solution for this.
window.onbeforeunload = warn;
This doesn't work:
function warn (e)
{
var destination = e.href;
alert(destination );
}
Okay, so to clear the things. If the user clicks on a link on the page itself, it is easy, because you can add an eventhandler to all of the links onclick event, but. I want to catch the address, what the user types into the url box of the browser.
Because it can't be done. The new location is private/sensitive information.
Nobody wants you to know which sites they visit when they leave your site.
If you just want to see what link destination, you can use :
document.activeElement.href
But getting the address line destination is not possible.
I've heard of solutions where they fire off an event if the mouse moves up to the address line (to warn the user that there are unfinished processes that have not been dealt with), but this sort of hack I would never do.
Kaze's answer is an interesting approach, but looking at the element focus when the page is navigated away from isn't really reliable. Partly because there is a delay between the link click and the navigation away from the page (during which time the user may move focus to some other element, but also because a link may be focused (eg. by keyboard control, or mousedown-without-click) without actually being used to navigate away from the page. So if you focused a link then closed the window, it'd think you were following the link.
Trapping onclick for every link on the page (plus onsubmit on every form) is slightly more reliable, but can still be fooled due to the delay. For example you click a link, but then before the new page starts loading hit the back button (or press Escape). Again, if you close the window it thinks you're following the link.
I want to catch the address, what the user types into the url box of the browser.
There is no way that will ever happen. It is an obvious privacy no-no.
Having ads loaded via iframe, it is possible to detect a click with the left mouse button? A normal click?
I thought of another question, I saw a code that worked for me but it is not secure, since it monitors the activeElement, and has a flaw in it, if the user clicks with the right mouse button, the function triggers TRUE and triggers the alert.
capture click on div surrounding an iframe
If the advertisement is located on a different domain it is impossible because of security.
What you could attempt to do however, is to have a transparent element over the advertisement and detect the click there.
Then you would hide the element, and wait for the user to click a second time shrugging off the first click. If the user is actually interested in clicking the banner they will click a second time (when your transparent invisible element is gone).
Update
Have a look at this: HTML "overlay" which allows clicks to fall through to elements behind it
Apparently you can allow click through with pointer-events css.
I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me
Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).
I have a little problem with simulating a click with javascript.
I'm aware of the .click() method but the click must be on a prezi loaded (flash) so don't really have a html element to use.
What I have instead are the exactly coordinates of the place I want to simulate click on. Is there any way I can do that?
The click must activate a flash element. (A play button)
Note: There is a similar question around that have an answer witch require swf control. I don't have that so that method is not applicable.
One other quick question... what happens if I simulate a click on an element that has display: none. It click on the elements "under" it? (as a normal click would do; and yes I know this sounds funny but I don't know how to explain it otherwise). If yes I was thinking of making a position absolute div, put it on top of flash and use .click(). The problem is that i have a feeling that the click won't be applied on flash.
This is somehow a combination of javascript simulate mouse click on specific position and mouse click somewhere else on page (not on a specific div).
Make a transparent gif and position it absolute in your page wherever you need, then simulate a click on it.
I use this technique on some flash ads because I don't want to open links using JavaScript (since some users can be prompted with a question if they wan't or not to open a new page on click).