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.
Related
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.
This question already has answers here:
Blur event triggered by click on child element
(4 answers)
Closed 6 months ago.
I am new to styling. I have something like
<div className= 'parent'>
<div className='foo'> <Increment> </div>
<div className= 'child'>
<input type = 'number'/>
</div>
</div>
So for one of the styling scenario I am using .parent:focus-within{<>} in css. I want the parent class to not be focus when component is clicked. Afaik , parent:focus-within will be true when any of its child is in focus.
you can catch the focus event and use Event.stopPropagation() function.
Something like that:
const handleFocus = (event) => {
event.stopPropagation()
}
<div className='parent'>
<div className='foo'> <Increment/> </div>
<div className= 'child' onFocus={handleFocus}>
<input type = 'number'/>
</div>
</div>
I am following this library for making slick.
This is my current layout
I want to disable the click methods for arrow-left and arrow-right button, while keeping the arrow here, so that it will not change slide or anything. How to do it?
Codesandbox:
https://codesandbox.io/s/naughty-matan-55c76?file=/src/components/HelloWorld.vue
You can add #click.stop to stop event propagation. See more about Event Modifiers.
<VueSlickCarousel>
...
<template #prevArrow>
<button class="arrow-btn">
<img
src="#/assets/images/common/arrow-right.svg"
alt="arrow-left"
#click.stop>
</button>
</template>
<template #nextArrow>
<button class="arrow-btn">
<img
src="#/assets/images/common/arrow-right.svg"
alt="arrow-left"
#click.stop>
</button>
</template>
</VueSlickCarousel>
Updates
To disable click event from button (not only from img). You can do it with css:
.arrow-btn {
pointer-events: none;
img {
pointer-events: all;
}
}
But why not we just add #click.stop to button instead of img?
The problem is here:
...
arrow = this.prevArrow ? (
this.prevArrow(option)[0]
) : (
<button type="button" data-role="none" style="display: block;">
Next
</button>
)
...
mergeVNodeData(arrow, 'on', {
click: () => {
if (clickable) {
this.$emit('arrowClicked', { message: this.type })
}
},
})
First it checks if you have passed the prevArrow slot, if so they will use your slot. If not, they will use the default button.
And either way, they will combine their default props/event handlers which include the 'click' event, meaning that your click will only be overridden.
I have a JavaScript functions which get run 2 times when I click on one element. Take a look at my code, I only want that the first call will be done not the second also:
<p class="chat" onclick="Open('chat')">
<img class="chatpicture" src="jpg/1.jpg" onclick="Open('user')">
</p>
When I click on the image then also the p element with his onclick function will be run. Because the image onclick is inside the p element which also have onclick.
What is the best way to only let the image onclick run and not at same time also run the p element onclick?
You can try using Event.stopPropagation():
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method.
Demo:
function Open(inputVal){
event.stopPropagation();
console.log(inputVal);
}
<p class="chat" onclick="Open('chat')">
<img class="chatpicture" src="jpg/1.jpg" onclick="Open('user')">
</p>
Delegate and test the class
const Open = str => console.log(str);
document.getElementById("container").addEventListener("click", e => {
const tgt = e.target;
if (tgt.classList.contains("chat")) Open('chat');
else if (tgt.classList.contains("chatpicture")) Open('user');
})
img { height:50px; }
<div id="container">
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
</div>
Below is my code
ComponentA.js
return statement inside the component
return (
......
<a id="MytoolTip" ......
<ComponentB
content={
`
<div class="share_cart_tt">
<a
data-automation-id="..."
class="callFunction"
> Invite </a>
</div>
`
}
target={'MytoolTip'}
closeButton
/>
);
ComponentB.js (this is a tooltip which will be displayed when user clicks on anchor tag MytoolTip)
.....
class ComponentB extends Component {
launchModal() {
console.log("hey its fine");
}
...
renderContent = () => {
document.getElementsByClassName('callFunction').
addEventListener('click', this.launchModal);
**I am trying to bind click event here but its not working out**
}
}
I am beginner to react and I tried different methods to bind the click event but nothing worked out.. need help.
When the user click on the anchor tag inside the tooltip with class .callFunction console.log should be printed.
Please note that I am trying to add onClick event to the anchor tag, which is just a static content in ComponentA and a tooltip will be created by getting static content in prop.content in ComponentB
React components have synthetic event listeners. All you need to do is add the onClick property to the element. So yours would look like this:
return (
......
<a id="MytoolTip" ......
<ComponentB
content={
`
<div class="share_cart_tt">
<a
data-automation-id="..."
onClick={FunctionToBeCalledWhenClicked}
class="callFunction"
> Invite </a>
</div>
`
}
target={'MytoolTip'}
closeButton
/>
);