We Keep Coding

Performance issues when focusing inputs in modals?

So, I've probably stumbled upon the strangest bug/feature I've ever seen. I've developed a website which helps you read foreign books. See this book (or any book on the website, it doesn't matter): https://anylang.net/en/books/de/heaven-has-no-favorites/read.
Try to quickly move your mouse hovering on words/sentences, maybe click on something etc. Everything should work pretty smooth.
On mouseover a word quickly becomes orange, on click the translation quickly appears etc.
Now click on the login button:
The first input should become focused.
Then close the modal and try the first step again. Everything becomes very laggy. The lags won't disappear no matter what you do, except:
Click on the page number:
Lags disappear. Completely.
The same result (lags) can be achieved by:
Clicking on a word inside a translation tooltip
It has a contenteditable attribute, so the behaviour is exactly the same as in the first case.
Click anywhere outside the tooltip, closing it and causing the lags.
Lags still disappear if you click on a page number (or, probably, any input[type="text"] on the page (but not in modals))
Some things to consider:
The effect doesn't disappear if you lose focuse in a modal and then close it.
The same effect can be achieved by focusing in a modal and then manually removing a modal from dom. So javascript is not the problem.
If you don't remove a modal from dom but apply "display: none" to it instead, everything is ok, no lags.
My guess is that the browser gives higher priority to elements where input[type="text"] is focused and doesn't respect it when an element with the input is removed from dom. Any other ideas? This thing really boggles my mind.

If you do a performance profile of your site while going through this process, you'll see that your memory allocation continues to climb as you interact with the page. You'll also notice that the more text you hover over the worse the lag eventually becomes.
This is indicative of a memory leak in your code - possibly caused by event listeners that aren't being cleaned up properly.
Without an in-depth review of your code it's unlikely anyone here is going to be able to pinpoint where the exact problem is, but hopefully I've pointed you in the right direction!

Have Window Keep Focus After One Click Fires Two Page Redirects

First of all, happy holidays to everyone.
I have an anchor element that fires two page redirects - one through the href attribute, one through jQuery.
<a id="myClick" target="_blank" href="http://www.google.ca">Google</a>
$('#myClick').on('click', function () {
window.location = 'http://www.stackoverflow.com';
});
This works fine, but the new tab gains focus. I'd like the original tab to keep the focus for the user. I did give window.focus() a go but, as assumed, it didn't work.
I also did try working with the fiddle from this answer but it only fired the new tab and the original page (jsfiddle) remained the same URL. My edited Fiddle from linked answer
How could I go about having the original tab keep the focus? Is it out of my hands?

You can't open tabs in the background using javascript because this is set in the user's preferences in about:config, which you have no control over. The setting is:
browser.tabs.loadDivertedInBackground=true

How to get the id of a window.alert()?

I want to pop up a window.alert() if the user mouses out of an area when they haven't saved changes yet (for structural reasons, there are several forms and a common problem I've seen in other apps is making changes in multiple areas, submitting one and losing the rest) and automatically close the alert when they mouse back into the area. To do that, I need the id of the window that pops up, but I'm not sure how to get it.

The window does not have an id, and you cannot close it from Javascript. It is not a part of the DOM.
You can only open an alert() box, and then wait till the user closes it. Nothing else.

No alert() please :)
Actually an alert() will block further code execution anyway so even if you COULD close it programatically it would never actually execute that dialog-closing code.
You need something you can access through the DOM (like every other response here says).
Make your Javascript track the mouse location and upon leaving the area you overlay a dark translucent background or do a modal dialog
Techniques on creating modal dialogs
I would also advise adding a pointer-events: none; and position: fixed to the underlying content to prevent further action until the user actually goes back where they should be.
If you want real specifics on how to code this let me know. I'm hoping you'll travel down the rabbit hole and discover the wonders on your own, though. Much more satisfying.

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?

Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars

Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()

For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

Downsides of onMousedown vs. onClick?

I've been dealing with a bane-of-my-existence Javascript problem involving tracking when a user clicks on a link (in case you're curious, here it is: Why does using target="_blank" cause Javascript to fail?).
I've figured out that I can solve the problem by tracking an onMousedown event rather than an onClick event.
I'm curious about the downsides of this approach. The ones I can think of:
If a user clicked down on a link and then moved the mouse off the link before releasing it, then the event would be recorded even though the user hadn't visited the link
If a user used the tab key to move the browser focus to the link and then hit enter, the click would not be recorded
Neither of these are common, so I'm not terribly worried about them.
Are there any other downsides I'm missing?

One more: mousedown captures right / middle clicks too.
But for your two reasons, I would stick to onclick. I know quite a few people who use keyboard nav. Especially search-and-gotolink in FF.(/ to search followed by enter to go to the link).
But if these two are not a problem for you, I think right / middle clicks wouldn't be too.
I think the way to track all the users who follow the link is quite tricky -- the user could right click and click on new tab / new window...