Stop browser from sending certain JavaScript events - javascript

There is a website which fires a function on when the tab is blurred. I don't want that to happen.
Is there a way I can stop javascript from firing window.onBlur event?
From initial search, I have come to the conclusion that I need to override the default function of javascript, which can be done using userscript managers like Greesemonkey.
I tried the following script in Greesemonkey:
window.onblur = null
This doesn't seem to have any effect and the webpage behaves same as previously.

Have look at Event.preventDefault() and Event.stopPropagation() if it helps your case.
If you would like to override the function which is called on the event, you can simply redefine it and insert it using a script manager. For example:
var originalCallbackFunction = callbackFuntion;
callbackFunction = function() { // Redefinition
/* Do something else */
}

Related

Use lodash or some other library to throttle a default click event listener on html tag

My intent is to throttle the click listener on some links and form submit buttons. The main idea was something like:
Click
<script>
window.onload = function() {
tags = document.findElementsByClassName("throttled-click");
for (let tag of tags) {
tag.onclick = _.throttle(tag.click, 1000, { 'trailing': false });
// Clearly doesn't work
}
}
</script>
The code above doesn't really work since no matter what I do, the default click event listener won't get throttled. If I pass in some other function (e.g. console.log("Throttled")), it will be throttled but the default click event listener won't.
Other than attempting to write my own throttling function, I'm out of ideas.
Note that I'm not a js dev so I may be missing something obvious.
EDIT: The goal of throttling the default click event listener is to prevent users from submitting too many forms when something hangs. Granted, form submissions usually entail a redirection which implicates that it's enough to simply disable the HTML click event after the first click.
My idea was to implement a throttle for cases when the page won't refresh or some edge case occurs where the request never reaches the server and the user actually has to click the submit button again.
I was able to do it with a custom implementation, I don't think there's a way to do it with existing standard libraries which I find kind of strange.

Different actions with onbeforeunload

I am working on a simple chat script using Ajax and want to indicate when a user leaves the page. Have read several docs and found this works:
window.onbeforeunload = leaveChat;
function leaveChat(){
... my code
return 'Dont go...';
}
Unfortunately (and logically), if they cancel the exit, my code is still executed and they are flagged as leaving even though they are still on the page? It should only execute if the confirm leaving the page. Any suggestions?
I would use onunload, but it doesn't seem to work in any of my browsers (Chrome, IE).
First, you should add the event handler using:
window.addEventListener('beforeunload', function() {
// Confirmation code here
});
window.addEventListener('unload', function() {
// fire pixel tag to exit chat on server here
// UI interactions are not possible in this event
});
For further research:
unload event reference
beforeunload event reference
Window.onunload reference

Guarantee non-conflicness

I would like to make an addon to browser, that would show image of question mark if something was selected, and to show a tooltip with translation upon click on the image. Something like on nytimes web page when reading articles, but more user friendly. For showing the image I use this:
function ShowQuestionMark(e)
{
if (window.getSelection().toString() != "")
{
/* add an img tag */
document.onmouseup = RemoveQuestionMark;
}
}
function RemoveQuestionMark(e)
{
/* remove img tag */
document.onmouseup = ShowQuestionMark;
}
document.onmouseup = ShowQuestionMark;
My goal is to make it work on every web page (or at as many as possible).
Now my first question. I assume, when I use it this way and load a page, which by default have a handler for onmouseup event, I override it and whatever was the handler, it won't be executed when firing onmouseup event. Am I correct?
Second question, how can I guarantee, that my script won't override/break any default behavior? Should I use binding? Or should I create new unique event? Or something entirely else?
I don't know the answer to your first question, because I've never directly assigned an event handler like that while writing an extension, knowing a conflict would occur. But I think the page's event handler would override yours. Either way, you need to avoid the conflict.
Anyway, here's how you avoid the conflict: use addEventListener():
function ShowQuestionMark(e) {
if (window.getSelection().toString() != "") {
document.removeEventListener("mouseup", ShowQuestionMark);
/* add an img tag */
yourImgTag.addEventListener("click", RemoveQuestionMark);
}
}
function RemoveQuestionMark(e) {
yourImgTag.removeEventListener("click", RemoveQuestionMark);
/* remove img tag */
document.addEventListener("mouseup", ShowQuestionMark);
}
document.addEventListener("mouseup", ShowQuestionMark);
Now, if the page is kind enough not to override or cancel the event (which it can still do), both your event handler and the page's event handler will be run.

Window.OnBeforeUnload

I am trying to create a customisation to our existing software, which launches on this event. I need to be able to catch the window.onbeforeunload again once the user has made their choice.
I have tried wrapping the functions but can't seem to be able to overwrite the one which is loaded first. Does anyone have any ideas about how I can approach this, or force the newly assigned function to overwrite the old one.
You can not cancel the unload depending on which button the user presses, and you can not invoke this event manually. It's not even a standard event. Think of the vulnerabilities that could be used for malicious purposes if the event had the capabilities you want it to have.
This is about all you can do...
window.onbeforeunload = function() {
alert("one"); // First time, choose to stay on page
window.onbeforeunload = function() {
alert("two"); // Second time
}
}

jquery detect change in dom outsite jquery

Is it possible using jQuery (or any other JavaScript function) to detect when an onmouseover event is fired?
I have a page where existing javaScript calls a onmouseover/out events to re-write the contents of the div. I'm actually only interested in getting at what the div contains while the mouse is hovered over it. The onmouseover event is generated server-side by a program I don't have the ability to change :(.
Any suggestions on how to accomplish this?
$("#idOfYourControl").hover(function() { /*mouseover event*/ }, function() { /*mouseout event*/ });
Here's an even more specific example:
$("#idOfYourControl").hover(
function() { $('#divToShowText').text($(this).text()) },
function() { $('#divToShowText').text("") }
);
You can use the mouseover event handler in jQuery.
http://docs.jquery.com/Events/mouseover#fn
Depending on how the server is writing the original mouseover handler out, you can use a simple overwrite to add your own hook that you can then use to detect the old one being fired:
var oldHandler = yourElement.onmouseover;
yourElement.onmouseover = function() {
//Do whatever new code you want here...
$j.trigger('oldHandlerCalled');
oldhandler();
}
Kind of a quick and dirty example, but you get the idea. No guarantees that this won't leak memory in IE6 ;)
If the server is attaching the event via jQuery, you can look in yourElement.data.events and do it in a much tidier way than this.

Categories

Resources