I am having a big of an issue.
I have some third party js includes and they popup some info on a button click, that is in an iframe. Of course, I don't have access to this iframe. But the 3rd party captures clicks and closes the iframe popup. So the behaviour is like so -
I am a user, I click on this "3rd party button, an iframe popups up anchored bottom right". Now, if click anywhere on the main parent page (my page), the iframe closes.
Here is the problem. I have some custom form fields/spans etc.... in which I capture the clicks before they bubble up so the document.body never get that "click".
How can I fake this out? I tried "mousedown" and that seems to propagate up. So I then said something like:
jQuery(document.body).mousedown(function(){
jQuery(document.body).click();
})
so, no matter what is mousedown, I try to say there is a click happening. BUT that doesn't work. Not sure why? If I attach that click onto a div and alert - it alerts, but perhaps "natively" it isn't the same.
Any ideas of to truly simulate a body click event when/if the element clicked on has had its native clicked event captures before it can bubble up?
EDIT: I have tried various things.
ie:
<div id="captureclick"></div>
<script>
jQuery(document.body).mousedown(function(){
jQuery("#captureclick").click();
})
</script>
I also tried:
jQuery's trigger function trigger('click');
Not working. I haven't tried using a button as the "click traget", yet.
Thanks.
Related
Im having an issue with modal in React. The problem is Modal closes if I click inside content and move mouse and release outside. This shouldnt happen.
Currently it works fine because if I click outside content the modal closes, but if I click inside, the modal stays.
But dragging mouse click from inside to outside closes it...
https://codesandbox.io/s/awesome-newton-fqe6b
Looking for help! Thanks!
I do experience the behavior you're describing. Pretty weird, I was under the impression that e.target in this instance would always refer to the interior div if the click event was initiated on that element, but maybe that's not accurate. I tried using stopPropagation(), but it doesn't work because the click event seems to completely ignore the element that the mousedown portion of the click was actually initiated on.
I made a hacky workaround that will save the initial target in the state for comparison with the currentTarget and achieve the effect you're looking for, but this definitely bears some looking in to.
Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)
I've got dialog that I wrote and it closes when clicking outside (no overlay/backdrop).
It works nicely unless there's an iframe, in which case my listener on outside clicks is never called.
Here is a JSBIN to illustrate the problem. (http://jsbin.com/vuneyopedu/edit?js,console,output)
To briefly explain in the below screenshot:
Clicking RED Dialog Increments.
Clicking Outside Dialog (YELLOW and GREEN) should Decrement but only YELLOW works.
The event listener for outside clicks is never called when clicking iframe (GREEN)
Question is - How do I make clicking anything outside the RED square (specifically clicking the iframe) decrement the number. (or close the dialog, in the "real" world)
How about binding event to iframes' document.
iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);
iframesArray.forEach(function(frame) {
frame.contentWindow.document.addEventListener('click', function() {
inc();
}, true);
});
The correct approach here is to use a modal and one of the strongest use-cases for the modal. By design modals prevent clicks from falling through to elements below hence there is no need to handle side effects like your iframe issue or e.stopPropagation() or anything else. It also makes positioning very clean.
As a side note, the currently accepted answer is a very poor approach since it relies on adding an event handler inside the iFrame, then binding that onto the parent container window. This is wrong on many levels: no separation of concerns, iframe from different domains will be blocked due to CORS, iframe will register with any and all parents even when not needed, etc.
I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");
When the user clicks on an external iframe, all event listeners on my BODY tag stop working and I need to prompt the user to click outside to regain the "focus" on the body tag.
But knowing when the user clicks on an iframe is actually very hard.
I know of two ways to know when there is a click on an iframe:
1- Overlapping a transparent div on the iframe (with the downside that the user has to click twice to actually click the iframe).
2- A very rough workaround which is having an input autofocused all the time and detect when it loses focus. But it's just stupid to even consider implementing it.
Is there another way to know when the user "loses focus" of the main body by clicking on an external iframe?
This is super easy, but not necessarily effecient/ethical.
setTimeout(function(){
document.body.focus()
}, 100 );
I would in all honesty use option #2 with some jQuery.
$(el).focusout(function(){
$(this).focus();
})
The easiest method and the only one I'm aware of actually is to make an infinite loop that gets current focused element.id.
Then it's simply a matter of comparing that id with your iframes to know which has been clicked.
Note that you will only be able to know for sure the user clicked once in the iframe, but there is no way to count clicks afterwards. Also notes that iframes can focus themselves with this method will be indistinguishable from a click.