We Keep Coding

How can I catch the click outside the browser - Javascript

For my project, I need to catch all the click outside the browser in Javascript. Is there a way to do that ? For example by asking the user the right access ?
I need a function like "onclick" that works even outside the browser.

There are various approaches for detecting when the focus moves out of the current page which would be a side effect of clicking outside the window if the window currently has focus.
Explicitly detecting clicks outside the page is not possible. It would be a security problem if a web page could monitor how the user interacts with other applications.

To detect click outside element with JavaScript, we can use the element’s contains method.
For instance, we write
const specifiedElement = document.getElementById("a");
document.addEventListener("click", (event) => {
const isClickInside = specifiedElement.contains(event.target);
if (!isClickInside) {
// ...
}
});
to select the element we want to check with getElemebntById.
Then we add a click listener for the whole page with document.addEventListener.
In the callback, we call specifiedElement.contains with event.target to check if we clicked inside the a element.
If it’s false, then we clicked outside of it.

javascript detect click outside of element
var ignoreClickOnMeElement = document.getElementById('someElementID');
document.addEventListener('click', function(event) {
var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
//Do something click is outside specified element
}
});
click outside javascript
// Vanilla js
var ignoreMe = document.getElementById("ignoreMe");
window.addEventListener('mouseup', function(event){
if (event.target != ignoreMe && event.target.parentNode != ignoreMe){
// Place your output
}
});
https://www.codegrepper.com/code-examples/javascript/javascript+detect+click+outside+of+element

Issue with binding and unbinding a click listener in Angular JS

I'm trying to add a click listener to the document when a dropdown is open, so that when you click anywhere else in the document it closes the dropdown and unbinds the click listener. I'm using some code from https://stackoverflow.com/a/17342418
I've discovered an issue though.
Binding:
$(document).bind('click', $scope.remindersDropdownHandler(event));
Handler:
$scope.remindersDropdownHandler = function(event) {
var element = $("#remindersDropdown");
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
var buttonElement = $("#remindersButton");
var isbuttonElement = buttonElement
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup || isbuttonElement) {
return;
}
$scope.openReminders = false;
// $(document).unbind('click', $scope.remindersDropdownHandler);
}
The handler itself is working just fine, however it only ever executes once! And that's immediately when you click the button that opens the drop-down and adds the bind. After that no matter where you click it never fires the listener again. (Trust me I've done a lot of debugging with console.log() over the past hour.)
However, if instead of referencing a function for the handler, I instead write it like such:
$(document).bind('click', function() {
var element = $("#remindersDropdown");
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
var buttonElement = $("#remindersButton");
var isbuttonElement = buttonElement
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup || isbuttonElement) {
return;
}
$scope.openReminders = false;
});
That works, and each time I click somewhere on the document it correctly executes the handler and closes the drop-down. The problem is because I haven't referenced the handler via a variable, I can't unbind it, so the handler is permanently attached. I need to be able to unbind it so that my site doesn't get overloaded with click listeners on the document.
So my issues are:
1) When I reference $scope.remindersDropdownHandler() as the handler for my click listener, why does it only fire once and then never again?
2) How can I fix up my code so that I bind the appropriate function for the click listener, and then unbind it when I choose to do so?
Note: In the example code I'd commented out the // $(document).unbind('click', $scope.remindersDropdownHandler); just to reinforce that there was no code that was immediately unbinding my click listener.
Solved: A user on Reddit pointed out that removing (event) from the specified handler in the bind would allow it to work.
https://www.reddit.com/r/angularjs/comments/3fypck/help_issue_with_binding_and_unbinding_a_click/cttr0bw
I.e. converting
$(document).bind('click', $scope.remindersDropdownHandler(event));
to
$(document).bind('click', $scope.remindersDropdownHandler);

onbeforeunload keeps poping up an alert box when user click something

I am created a page that warns the user when they click on the (close x) button on the window. I did some reading and discovered that JavaScript had a function called onbeforeonload which can take of the job I was trying to achieve. I however found at after my implementation that, when a user clicks on anything in my window (example: save and enter) The dialog box reappears. I was wondering how I could only target the specific X button in the window.
window.onbeforeunload = function (evt) {
var message = 'Do you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}

Right now the function is being called globally... this resource might help you achieve what you are looking for: http://randomdrake.com/2009/09/23/how-to-use-onbeforeunload-with-form-submit-buttons/

This is a "working as intended" behavior for IE. Anchor tag clicks, regardless of whether they navigate or not, will trigger the onbeforeunload event.
This is the workaround I used - I am not sure whether it is the best approach or not:
document.onmouseup = function () {
if (window.event.srcElement.tagName === 'A') {
// turn off your onbeforeunload handler
...
// some small time later, turn it back on
setTimeout(..., 200);
}
};

DOM element dblclick event changes after click event on dom element deletion

I've got a strange problem on Firefox that seems not to happen on Safari.
There's a table with a set of rows, each one of which has it's own onclick and ondblclick events. When one of the objects is double-clicked, it fires first the onclick associated function (as expected), where another row (different from the one double-clicked) is deleted. Afterwards, the function associated with dblclick won't fire.
If I comment the line which removes the row (not the one clicked, as I said, but another one), then both the onclick and ondblclick events will fire... I attach you the code for both event functions:
ret.onclick = function(){
// Trigger click event
var evt = arguments[0] || window.event;
self.signalClick(evt.target || evt.srcElement);
if(elem == this.selected) return;
if(self.selected != null){
// Set list element to not selected
var telem = document.getElementById(self.getChildID(self.selected['id']));
telem.setAttribute('class', 'gui_list_uselected');
// Remove previously selected element summary
var telemexp = document.getElementById(self.getChildID(self.selected['id']) + '_exp');
if(telemexp) telemexp.parentNode.removeChild(telemexp); // FAULTY LINE!
}
ret.setAttribute('class', 'gui_list_selected');
self.selected = elem;
// Add element summary to the list
appendAfter(ret, self.drawSummary(elem));
};
ret.ondblclick = function(){
// Trigger double click event
var evt = arguments[0] || window.event;
self.signalDblClick(evt.target || evt.srcElement);
};

Firefox works correctly. According to the spec, onclick fires before ondblclick anyway.
Check out this so answer to overcome that.

How to disable all links before load jQuery?

I need a pure Javascript code to disable all links while loading the page, avoiding to click them and redirecting to other page when its using a Facebox.
Can be something that I place in a <script> tag in the <head>.
Any suggestions?
EDIT:
Ok, I get that in head doesn't work. But in body ending work properly. That's why I asked for suggestions. :)

Make this the first script tag in your head section:
window.onclick = function(e) {
if(typeof $ === 'undefined') {
e = e || window.event;
e.preventDefault();
}
}
This catches all click events, and if $ is undefined, cancels the event.
Has the advantage of working even before the DOM is loaded.

Use document.links and prevent their default behaviour with preventDefault().
var links = document.links;
for (var i = 0, length = links.length; i < length; i++) {
links[i].onclick = function(e) {
e = e || window.event;
e.preventDefault();
}
}
If you wanted a more permanent disabling of the links, use removeAttribute('href').
Place this code somewhere after the closing body tag if you don't want to use DOMContentLoaded or the window load event.
You can't place it in the head element otherwise and have it execute immediately because document.links will most certainly be empty.

In the page, give all your links empty href values. Use the load event to assign appropriate values. Users with javascript disabled or unavailable will see broken links.