We Keep Coding

in html captures click event on element that was displayed only on focus of another element

in html, sometimes I have elements that I display only when another one gain focus : you click on a button, to make another one appear.
If then you click on this newly displayed element, it disappears immediately because the focus gets away from the first one.
EDIT : And this is what I want. That could be a drop down menu for example, and I want the list to appears when clicking the title, and I want it to disappear when clicking on an element in the list.
but I also want to capture the click event before the element go away, and I can't do that ! example :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I can workaround with the use of opacity and visibility with transition :
opacity to have the ux of the instantaneous hide of the element but it's still present so you can click on it
visibility is being delayed (sort of) with the transition, so for a moment you still have the element because it's still 'visible', but for human eyes it's not visible anymore
like that :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
/*
display: block;
*/
visibility: visible;
opacity: 1;
}
#buttons p {
border: 1px solid blue;
/*
display: none;
*/
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
but, I'm not sure it's a good practice because the element is actually still on the page, so it can impact accessibility and maybe other things.
do you know a way to capture the click on the element, before it disappears ?
what I don't understand, is the following : the buttons disappears because the div lose it's focus. But, it loses it's focus BECAUSE a click occurred on one button, so why isn't this click on the button detected ? or how is it detectable ?

You can replace you :focus with :focus-within which was created specially for this purpose.
And to do so that when clicked the elements loses focus, you can use the blur method to do so :
function make_action(element) {
console.log(element);
element.blur()
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
/* there is the change */
#buttons:focus-within p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>

HTML button becomes "selected" with little blue outline after it is clicked which is not needed to be

Here is what happening. I have a simple button in HTML with a simple action in JS.
Button in HTML:
<button class="btn_open_calc">Open Culculator</button>
Styles in CSS:
.btn_open_calc {
background-color: rgb(232, 209, 237);
width: 200px;
height: 40px;
border-radius: 10px;
font-size: medium;
}
Response in main.js:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc() {
Modal_Container.style.display = 'flex';
}
But when I press the button here is how it starts to look:
When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.

Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.
But as MDN notes,
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.

You can add this to your CSS to get rid of it if you really want.
button:focus {
outline: none;
}
example:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc(){
Modal_Container.style.display = 'flex';
}
.btn_open_calc{
background-color: rgb(232, 209, 237);
width: 200px; height: 40px;
border-radius: 10px;
font-size: medium;
}
button:focus {
outline: none;
}
<button class="btn_open_calc">Open Culculator</button>

'mouseenter' and 'mouseleave' event keeps triggering with div as cursor

I made a 'custom cursor' by hiding the users cursor and displaying a div where the original cursor would normally be displayed on the screen.
Now the problem is I'd like to add some animations when hovering over an element (e.g. scale the 'cursor', or in this case the div that acts as the cursor).
In this example I made a button, and gave it a 'mouseenter' and 'mouseleave' event.
When you enter the button with your cursor, I console.log("enter");
When you leave the button, console.log("leave");
You can quickly see the problem: the two events are being triggered numerous times when hovering over the button, while the cursor is not actually leaving the element.
Also note that this problem doesn't occur when you're very slowly hovering to the left, or to the top (in a straight line), which is probably because of the 'left: e.pageX and top: e.pageY' piece of code in the script.
What can you do to fix this so the two events trigger properly?
$(document).ready(function() {
var cursor = $(".cursor");
/* Cursor */
$(document).on("mousemove", function(e) {
cursor.css({
left: e.pageX,
/*Or clientX and clientY */
top: e.pageY,
});
});
/* Button */
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: none;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>
<!--Cursor-->
<div class="cursor"></div>

Add pointer-events: none to your .cursor to make the cursor (black dot) never a target of any mouse events, and so it will never affect the mouse enter and mouse leave events. You can read more about pointer events here
See working example below:
$(document).ready(function() {
var cursor = $(".cursor");
/* Cursor */
$(document).on("mousemove", function(e) {
cursor.css({
left: e.pageX,
/*Or clientX and clientY */
top: e.pageY,
});
});
/* Button */
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: none;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
pointer-events: none;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>
<!--Cursor-->
<div class="cursor"></div>

The problem is because there is a delay between the actual hidden cursor being moved by the user and the .cursor element moving to match its position, simply due to the performance of JS. As such the real cursor can, for a split second, go outside the bounds of .cursor and cause a mouseenter on the underlying button. The .cursor is then moved and the actual cursor then causes a mouseleave on the button as it's now over the .cursor element.
The simplest workaround would be to use CSS to set the cursor style to an image which matches the dot, as it performs far better than JS:
$(document).ready(function() {
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: url('https://i.imgur.com/SyBk5p5.png'), auto;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>

You should be able to do this with just pure CSS.
Since the div that houses your button and cursor are both part of the body they are siblings of the same container. You could use this to detect the hover on the button and then in turn change the styles of the cursor.
.marginB:hover ~ .cursor { background-color: yellow; }
https://jsfiddle.net/4nrtgx8o/
EDIT: If you remove your 100px margins from your button the hover effect wouldn't happen until you actually hover on the button. With your current CSS the button itself appears much smaller than the space it actually occupies as a piece of code. That's why the hover action happens before actually reaching the button.

How can I allow a click to pass through a div but still react to hover?

Say I have divA that partially overlaps divB. How can I allow clicks on divA to pass through to divB but still have hover fired when hovering over divA?
I'm aware of pointer-events:none; and this makes the clicks pass through but it also prevents the hover.
I have also tried the below, but it did not allow clicks to fall through
$(document).on('click', '.feedback-helper', function(e){
e.preventDefault();
})
Picture the relation of the divs like:
Here is the why of it (read as: "let's avoid an X Y problem"):
I'm working on an implementation of feedback.js
To see the issue:
view the feedback.js demo
click the feedback button in the bottom right
draw a box on the screen to highlight a section
click the "black out" button
try to draw a box inside the first box you can't because the click is blocked by the first box
I need to allow drawing a blackout box over a highlighted area but if I set pointer-events:none; I will lose other hover functionality I have on those elements.
Here is a jsFiddle example
All solutions welcome

I checked your example page and if you set a slightly lower z-index on data-type="highlight" that could take care of the problem, try a z-index of 29990 in comparison to your current 30000. This should allow you to target the highlighted feedback area and overlay it with the blackout elements.

You could get the click event for the overlaying element to initiate the click event for the underlying element.
Native JS Example:
document.getElementById('divA').addEventListener('click', function() {
alert('Clicked A');
});
document.getElementById('divB').addEventListener('click', function() {
var event = document.createEvent('HTMLEvents');
event.initEvent('click', true, false);
document.getElementById('divA').dispatchEvent(event);
});
div {
cursor: pointer;
border: 1px solid black;
}
#divA {
height: 300px;
width: 300px;
background: whitesmoke;
}
#divB {
height: 30px;
width: 30px;
background: grey;
position: absolute;
left: 100px;
top: 100px;
}
#divB:hover {
background: green;
}
<div id="divA"></div>
<div id="divB"></div>
jQuery Example:
$('#divA').on('click', function() {
alert('Clicked A');
});
$('#divB').on('click', function() {
$('#divA').trigger('click');
});
div {
cursor: pointer;
border: 1px solid black;
}
#divA {
height: 300px;
width: 300px;
background: whitesmoke;
}
#divB {
height: 30px;
width: 30px;
background: grey;
position: absolute;
left: 100px;
top: 100px;
}
#divB:hover {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA"></div>
<div id="divB"></div>

Another option is to use a pseudo element instead. Perhaps that will do what you need.
$('#toggleBlack').on('click', function() {
$('#divA').toggleClass('hidden');
});
div {
border: 1px solid black;
}
#divA {
background: whitesmoke;
position: relative;
}
#divA.hidden:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">Highlight the text once I'm hidden and cut/copy/drag</div>
<br />
<br />
<button id="toggleBlack">Toggle Hidden</button>

Prevent div from showing after slideUp() - jQuery

I'm trying to make a small piece of code, so when I click on the question mark, it shows another div. However, when I click on the body, it should hide the just revealed div.
The problem I am running into, is that even though I use .slideUp() when the person clicks on the body (note: the body is only clickable on the height of the ?), it also shows after clicking on the body again. How do I make it so clicking on body won't show the .popover again? If I add .hide() after .slideUp(), it just hides it directly and the slideUp effect is gone.
CodePen
HTML
<div class="center">
<span class="qs">? <span class="popover above">Voeg toe aan wensenlijst</span></span>
</div>
CSS
body {
background-color: #e3fbff;
}
/* Just to center things */
.center {
margin: 100px auto;
width: 30px;
}
/* The element to click on */
.qs {
background-color: #02bdda;
border-radius: 16px;
color: #e3fbff;
cursor: default;
display: inline-block;
font-family: 'Helvetica',sans-serif;
font-size: 18px;
font-weight: bold;
height: 30px;
line-height: 30px;
position: relative;
text-align: center;
width: 30px;
.popover {
background-color: rgba(0,0,0,0.85);
border-radius: 5px;
top: 42px;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
color: #fff;
font-size: 12px;
display:none;
font-family: 'Helvetica',sans-serif;
left: -95px;
padding: 7px 10px;
position: absolute;
width: 200px;
z-index: 4;
}
}
jQuery
$(".qs").click(function(){
$(".popover ").slideToggle();
});
$('body').click(function() {
// Hide all hidden content
$('.popover').slideUp();
});
$('.popover').click(function(e) { e.stopPropagation() });
$('.qs').click(function(e) {
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});

Hide the tooltip when clicking, if it is visible.
You don't need more code than this:
var popover = $('.popover');
var qs = $('.qs');
qs.click(function(e){
e.stopPropagation();
popover.slideToggle();
});
$('html').click(function() {
if(popover.is(':visible')) {
popover.slideUp();
}
});
$('.popover').click(function(e) { e.stopPropagation() });
Codepen

You can check if .popover is visible like:
$('body').click(function() {
// Hide all hidden content
if($('.popover').is(":visible"))
$('.popover').slideUp();
});
Also you don't need to use slideup() and hide() together.
codepen

You need to make sure the popup is not click on you can do a check like this
var mouse_is_inside = false;
$('.popover').hover(function() {
mouse_is_inside=true;
}, function() {
mouse_is_inside=false;
});
$("body").live('mouseup', function() {
if(! mouse_is_inside)
$('.popover').slideUp();
});