How to trigger <a>'s click event on safari - javascript

http://nycweb.io/test.html
Its html is
click
In chrome's console, if you do
document.getElementsByTagName('a')[0].click()
It will open a new page of google.com. Surprisingly, in Safari, this doesn't work. I searched around and found this page saying there is a bug with Mobile Safari which prevents the click event from being triggered. Also it lists some workarounds. I was hoping it would help when I started reading it, but it actually makes me more confused.
First of all, it says the bug only happens with Mobile Safari, but anyone with a Macbook can test from the link above that it doesn't work with Safari either; second of all, it says it only happens with "elements that aren't typically interative", and the workaround includes adding "href" to <a> to make it interative. But my test above shows that it doesn't work with <a> at all, no matter it has href or not.
The actual problem I am trying to solve is this page "http://fbnydob.applinzi.com/test.php", where you can see a warning message pushed by the Hosting company, which can only be prevented by click the little 'x'. I was trying to click it programmatically but it is an <a> even without href, so my program fails to work on Apple devices and my users keep seeing this unpleasant message.
Any workaround for this that actually works?

Could you try firing the click event?
document.getElementsByTagName('a')[0].fire('click')
This will call the click handler and close the popup window.

Related

What would cause click events to stop working in Internet Explorer 11?

I'm sorry for the vague question, but I'm dealing with a very vague bug.
Sometimes, in IE 11, my app just "dies." The pointer changes when you hover over a clickable element, but left-clicking does nothing, nor does right-clicking. Hover also stops working... if you hover over an element that has :hover CSS, the :hover CSS doesn't work. This only happens on specific pages, but not all the time... sometimes you load the page and clicking works, sometimes you load the page and clicking doesn't work.
If I hit refresh, clicking starts to work again.
If I use the keyboard to tab to an element and press "enter," I am able to follow a link I wasn't able to click on.
No errors in the console window.
IE version is RTM 11.0.9600.16428, running on Windows Server 2008 R2. I think it has also happened on Windows 7 and 7 Pro machines. I can't reproduce it on my Windows 8.1 machine with IE 11.0.9600.17728--clicking works consistently there.
Is it possible that, somehow, all the click handlers are getting taken off of everything? Even the window itself? That would explain why right-click stops working as well as left... I can't even get a context menu to use "View Source" or "Inspect Element." Nothing!
In case anyone else stumbles upon this: The problem turned out to be a bug specific to IE 11 for Win 7/Server 2008 R2. It doesn't happen in IE 11 for Win8.1+ or for any other browser.
Here's more info on the bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/205775/
I "fixed" it with one line of CSS:
use {
pointer-events: none;
}
I had a similar problem.
The text was entered into the input, after pressing Enter, an event onKeyDown was called, and the data was reloaded with recreating input element as well.
After that, the interface elements did not respond to mouse clicks. But as soon as you click on the different elements - it started working again.
My solution: before reloading the data, I had to trigger blur for the input.

No onclick for button, div, img with IE 9

Does anyone know of a workaround for the bug in IE9 where a function in the onclick for these page elements: button, div, img, isn't called? So you click on the element and nothing happens. This came up on a page that I am developing. If I launch the F12 debugger, the problem goes away. But I cannot ask site visitors to click F12 to browse the page! What are the solutions to this? I thought that this might only happen when the element is created dynamically in javascript. But this also happens if the element is defined in the HTML.
You mentioned that the code works if the user has the developer tools open, which means your problem is most likely that you are using console.log statements in your code.
in IE, printing to the console when the developer tools are not open will cause a javascript exception, which would cause your event handlers to stop working.
to get around this problem, wrap all of your console statements with an if statement:
if (console) {
console.log('foo');
}
Use jQuery, e.g.
$('#myButton').click(function() {
// code goes here
});
This will work out the correct code to fire the click event.

disable onclick ads with a content-script in Google Chrome

There are some video streaming sites that pop up an ad anytime you click anywhere on the page. The problem is, you have to click on the page to press play! So I was thinking of making a UserScript that disables the script that does this. The only problem is, I already disable all the scripts on the site and when I do it still pops up. Is there a way that I can disable them ? I'm also using jQuery, so if I can do it through their interface, that would be great.
edit: Two perfect examples of such sites are daclips.in and gorrilavid.in
I have Adblocker Plus, and it seems like it is not recognizing "on Click" events as pop-ups, rather normal clicked links. And the logic is simple, no Adblocker will block you from clicking something intentionally and it (the link) opening in another window/tab.
The problem is the new window contains your clicked Url, while the original window/tab "Refreshes" (i.e. redirects) to another url.
Advertising companies seem to use this trick to bypass adblocking software.
Just ditch Chrome and use Firefox. Firefox already have built-in mouse-click popups. I think all addons like Adguard or Adblock can not disable mouse-click popups. If you use Firefox, these are the steps:
Type about:config in the browser's address bar and hit the enter key.
First time users need to confirm that they be careful on the next page.
Type or paste dom.popup_allowed_events into the search field.
The value of the preference highlights all events that are allowed to spawn popups.
Edit the value to remove some or all of the items here.
Why not just use a browser extension such as AdBlock?
https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom?hl=en
My go-to is right click and open in new tab. onClick events only happen with a left click. It's cumbersome but it still ends up being less work than closing the pop-up and whatever annoying prompts it may have.
I do not there's a practical solution for this.
Moreover, I think some of the answers here are missing the specific case in OP, where clicking anywhere on the page will cause the pop up to happen, not just clicking on links. According to this, neither right-clicking then choosing "open", nor noticing and blocking the target URL will help. I do not know of an add blocker that helps here either, because it's not trivial to meaningfully filter a click event that is taking place on the whole page object.
Only the solution provided by #Monkey would work, at the drawback of possibly breaking other things.

Google Chrome Javascript Link Bug

When clicking a link in google chrome the focus event fails to fire. All other browsers fire the focus event for links.
Link
I do not want to attach the event onmousedown, but onfocus.
Anyone have an idea for a workaround.
EDIT:
I would definitely consider this a bug because all other focusable elements trigger focus on click.
Even non focusable elements with a tabindex trigger focus on click in google chrome.
<div tabindex="-1" onfocus="console.log('focus')">div</div>
I can't attach to both click and focus because then onclick, other browsers would call the function twice. I can't detect this functionality because it requires user
interaction, and I won't do user agent string detection, because well its wrong.
Using this html:
Link
Is they any way to invalidate the second onmousedown call to prevent the function being called twice in non google browsers.
EDIT 2:
After some further testing <input type=radio> also fails to call focus in google chrome.
Why in the world is google chrome like this, while Opera, IE and firefox are all okay. What is crazy is that the mobile webkit browser even triggers focus on links when I tried it on my Android device.
That actually works just fine, except that the focus event isn't triggered simply by clicking on the link (try tabbing and you'll see the event firing). I don't think it's a bug, why not just safe guard and use both?
One work around you could do to avoid the double focus events from popping on the working browsers while still getting the focus event to pop on Chrome, is to on a click event check whether anything has focus on the page, and if not, then trigger the focus event.
With jQuery it could be done like this:
$('a').click(function(e){
if(!$('*:focus').length) $(this).trigger('focus');
});
example: http://jsfiddle.net/niklasvh/qmcUt/
You can use small hack:
Link

Why does the 'window.resize' event fire when changing tabs in Chrome (6.0.472.55)?

I came across an interesting bug feature tonight when writing a handler for window.onresize in Chrome (the latest version 6.0.472.55). First open two tabs, then in the first tab open this jsFiddle.
Resize the window at will and the dialog box works as expected. Now, try switching to the 2nd tab -_-. Why is resize firing when the tab is changed? Could someone provide insight/more details if I need to file a bug?
The bug has been filed with Google. For the time being, I've just ignored it since my actual onresize handler doesn't display alert boxes.
Well how about that? Sounds like a bug. I would guess that onresize is listened-for by a combination of behaviors, probably new data about the page size that, for whatever reason, is coming in when a tab is focused.
In the version I use on Windows, 5.0.375.127, it doesn't happen, but if I actually resize the window, the resize event fires twice.
Knowing it's there, you can take a step to defeat it (that Google ought to do for you eventually). Wrap an if statement around your handler that checks for an actual change in the clientHeight or clientWidth if you need something to happen only if the event (as we understand it) actually occurs.
From the bug report:
When using Dev Tools in splitview and switching to a Tab without Dev
Tools opened in split, the resize-Event will be fired.
So, if the next Tab doesn't have the same window size, resize() will
be fired.
Without a working knowledge of how Chrome handles tab switching and page rendering, my guess is as good (or bad, depending how you look at it) as the next guy's. I would guess that rerendering the page, or reloading the already rendered page if it caches it, triggers the onresize event. This is what happens when the tab is switched. Following my theory, I would guess that Chrome doesn't trigger the resize event on initial page view because it has been designed not to. But again, as I don't know how Chrome handles tab switching internally, this is just speculation (food for thought).

Categories