Develop Reference

How to disable an onClick event when another OnClick event is also triggered?

Im trying to disable the
<div className="ContainerTitle1" onClick={() => handleAddComponent()}>
when
<div className="accordion1" onClick={(e) => handleExpandItem(e)}>
is clicked becuase it causes both events to happen. How do I create a function to disable the first event from happening when the second happens?
thanks. Ill attach a photo for more clarity.
return (
<div className="Item1">
<div className="ContainerTitle1" onClick={() => handleAddComponent()}>
<div className="buttonTitleWrapper1">
<p className="Item-Title1">{title}</p>
</div>
<div className="ItemIconsContainer1">
<TypeTag entry={item}></TypeTag>
{item?.category && <CatagoryTag entry={item}></CatagoryTag>}
<div
className="accordion1"
onClick={(e) => handleExpandItem(e)}
>
<img className="arrowIcon" src={AssetExport.BottomIcon}></img>
</div>
</div>
</div>
<div
className="panel1"
style={{
height: !expanded && "0px",
overflow: !expanded && "hidden",
}}
>
<p className="desc">{description}</p>
</div>
</div>
);
};

Welcome to this community! I'm new too, so I'll try to do my best to answer your question:
What's happening is that when you're clicking
<div className="accordion1" onClick={(e) => handleExpandItem(e)}></div>
You're also clicking
<div className="ContainerTitle1" onClick={() => handleAddComponent()}></div>
Because it is his parent, so both get clicked, but your accordion gets firstly fired since it is the closer one to your screen (capturing phase), then their parents get clicked too (it's like your click event getting propagated to the parents) and their event handlers get fired in consequence.
So, what you are looking for is to prevent the event from propagating from the event target (which is the closest element to your screen) to the parent's event handlers, and you can do so by using event.stopPropagation() inside your handleExpandItem(e) handler, e.g
function handleExpandItem(e){
e.stopPropagation();
//Some other stuff you want to do
}
Here's an article about this issue: https://www.freecodecamp.org/news/event-propagation-event-bubbling-event-catching-beginners-guide/
Hope it helps!

In handleExpandItem add e.stopPropagation(). That way the event will not "bubble up" (propagate) to the parent event handler.

Focus trap in a dialog modal and after exiting, focus on the last element clicked

I have multiple modals with different id's.
<div id="#Modal" tabindex="-1" class= active" style="left: Opx;" role="dialog" >
<div id="#Modal-text' tabindex="0">
<div class="container">
<div class= close-btn">
<a class="closer noprint href=" javascript:void(0) aria-label="Close dialog" tabindex="0"></a>
</div>
</div>
<div class= content">..modal content goes here</div>
<div class="focus-guard" tabindex="0"></div>
</div>
<div id="#Modal-anothertext' tabindex="0"></div>
<div id="#Modal-sample' tabindex="0"></div>
</div>
The jquery function add a focus guard div and add an event listener to it whenever a tab or keyboard navigation, through it, it will go again to the close button:
"use strict"
jquery(document).ready(function ($) {
// Check if modal exists
if ($(" [id+='Modal-']").length {
// Check id's if containstring of 'Modal-' and check if modal has child with #focus-guard
if ($("[id*='Modal-']").find("focus-guard").length === 0) {
console.log("does not exist");
const focusGuard = document.createElement("div");
focusGuard.setAttribute("class", "focus-guard");
focusGuard.setAttribute("tabindex", "0");
// Add focus guard to parent
$("[id*='Modal-']").append(focusGuard);
// The closer button is being added in the DOM upon clicking modal, that's why I used DOMNodeInserted
$(document).bind("DOMNodeInserted", function (e) {
if (e.target.className="container") {
const close = document.querySelector(".closer");
console.log(close);
focusGuard.addEventListener("focus", () => {
close.focus();
});
}
});
}
});
}
Have tried also some possible selectors and isolating a single modal.
Unfortunately, the eventlistener on focus guard div does not trigger and I cannot target speciffically the "closer noprint" class.
I know it's not right to have a selector like an array("[id=Modal-]"*) to refer to the parent element of the modal but since it's multiple, not sure if this will be the right thing to do. Might there be a simple solution for this one.
Also stuck with a function that focuses on the last item clicked after dismissing the modal.

React Custom Drop-Down - remove click event

I have made a custom dropDown with a div that I set an onClick attribute to open dropDown and close it. but also I want to close it when the user clicks to another part of the site.
<div
onClick={() => setIsDropDownOpen(!isDropDownOpen)}
className="selected-drop-down"
>
<span className="dropDownText">{selectedQuoteCurrency}</span>
<img
className="dropDownIcon"
src={require("../assets/image/arrow/dropDown-Arrow.png")}
width="15px"
alt="arrow"
/>
</div>
I also do this logic
useEffect(() => {
if(isDropDownOpen) {
window.addEventListener('click',changeDD )
}else {
window.removeEventListener('click',changeDD )
}
},[isDropDownOpen])
function changeDD() {
setIsBaseDropDownOpen(false)
}
But I was faced with a problem that when the component didmount for the first time everything is okay and dropDown opened and when click over there it closed, but for the second time, the dropdown didn't open because the state did not change to true.
furthermore, I tried to handle this click event by tabindex attribute according to this document => developerMozila but I didn't succeed

You can use hover in css like this. when mouse go away from loc of dropdown menu, automatic close.
.options:hover{
display: flex;
flex-direction: column;
position: absolute;
}
<div className="options">
<button>Add</button>
<button>Logout</button>
</div>

How to override div onClick event when button is clicked?

I am trying to stop the parent div from executing an onClick event when the child Delete button is clicked.
<div>
{notes.map((val) => {
return
<div key={val.id} onClick={() => Logic.selectNote(val.note, val.id)} className="editorDiv">
<Delete className="delBtn" onClick={(e) => del(e, val.id)}></Delete>
<ReactQuill className="note" value={Logic.limitDisplayText(val.note)} readOnly={true} /></div>
})}
</div>
I tried to implement event.stopPropogation however, it gives me an error.
function del(e, noteId) {
e.stopPropogation()
localStorage.removeItem(noteID)
}

In case anyone has the same problem as me, simply use e.stopPropogation(). This stops the click event from bubbling up to the other HTML elements. Thought I'd add it as an answer to make it clear.

Prevent click on label from triggering child button

When setup like this, clicking on a label that has a child button triggers button's onclick event:
function fireButton() {
console.log("Button fired!");
}
<label>Label
<button onclick="fireButton()">Button</button>
</label>
is there a way to prevent this?

Add for attribute to label.
function fireButton() {
console.log("Button fired!");
}
<label for=''>Label
<button onclick="fireButton()">Button</button>
</label>

You can put the button outside the label
<label>Label</label>
<button onclick="fireButton()">Button</button>

You can add preventDefault for labels and keep the existing code:
document.querySelector("label").addEventListener("click", function(event) {
event.preventDefault();
}, false);

You could use a different tag e.g <span> rather than the label But if you really need to use the <label>, you should prevent the default behaviour of the label onclick() like so:
function fireButton(){
//add actions here
}
function preventDefault(event){
event.preventDefault()
}
<label onclick="preventDefault(event)">Label
<button onclick="fireButton()">Button</button>
</label>

Here's an approach in CSS which also disables triggering button's :active state when clicking on label. Overriding label's onClick event does not do that.
label {
pointer-events: none;
}
button {
pointer-events: initial;
}