I have a div class ".square", i want to show an alert if there is a mouse clicking outside of the div element, i can't find something similar according to mouse event on this website w3schools. ( i want the opposite of my actual code ) Thank you.
function myFunction() {
alert('hi')
}
.square{
width: 100px;
height: 100px;
background-color: red;
}
<div class="square" onclick="myFunction()" ></div>
Simple solution: Add a listener to the window that produces the alert
and add a listener to the div that stops the click event from propagating so that it never reaches the window.
Disclaimer: calling stopPropagation
is not a great thing to do as it's quite intrusive, but I'm guessing you're just trying things out, so it should be fine.
window.onclick = () => alert('hi')
.square{
width: 100px;
height: 100px;
color: red;
background-color: teal;
}
<div onclick="event.stopPropagation()" class="square">TEST</div>
<div class="square">squre</div>
.square{
width:200px;
height:200px;
border:1px solid red;
}
let sq = document.querySelector('.square');
window.addEventListener('click', function(e){
if (sq.contains(e.target)){
alert('inside square box')
} else{
alert('outside square box')
}
});
I have this code, where I run parseString()to extract some information from an xml file function parseTime(){ var parser = new xml2js.Parser(); var data = fs.readFileSync('C:\\Temp\\tasks\\acis\\110-...
I have this code, where I run parseString()to extract some information from an xml file function parseTime(){ var parser = new xml2js.Parser(); var data = fs.readFileSync('C:\\Temp\\tasks\\acis\\110-...
I'm sure this is a duplicate, but I couldn't find the right search terms to find an answer. I'm trying to use hasOwnProperty() to determine if a function exists on an object or not. I know there are ...
I'm sure this is a duplicate, but I couldn't find the right search terms to find an answer. I'm trying to use hasOwnProperty() to determine if a function exists on an object or not. I know there are ...
I'm using the bootstrap-datetimepicker in a form with a radio button, and I'm having a lot of issues with it. The first problem is that only the old version of it is working for me, not the current ...
I'm using the bootstrap-datetimepicker in a form with a radio button, and I'm having a lot of issues with it. The first problem is that only the old version of it is working for me, not the current ...
How is it possible to implement, using CSS only (the worst of cases using some JS) to do the following global.css (readonly) .red { color: red; /*tens of lines of additionnal css*/ } ...
How is it possible to implement, using CSS only (the worst of cases using some JS) to do the following global.css (readonly) .red { color: red; /*tens of lines of additionnal css*/ } ...