I have a box that I want to hide when it is clicked. However, if the text inside of the box is clicked, I don’t want it to hide.
In vanilla JS, I would just do a .stopPropagation call, but that doesn’t exist in Wix’s API.
How can I make it so the parent element will not get the Click event if it starts at the child?
Create two buttons, one smaller and the other bigger, and overlay the smaller one on top of the bigger one. You may need to right-click | Arrange | Bring to Front on the smaller one.
Unfortunately, that won’t work. The text needs to be inside the box (it’s not a button) so that it will stay correctly positioned, since the box is a part of the header, but is not completely inside the header (only about 10% overlaps the header, the text is completely outside of the header).
I’m not really following… A button is just a box with different event handlers and roundable corners; not sure how the header is involved with all this. Anyway, the other thing to look at would be to override the onClick() and onDblClick() events which are exposed on both buttons and boxes.
Right. But if you have box with text inside of it (both which can have onClick) and you click the text, how do you make the box, who is the parent of the text, not get the event?
Just did a test - created a big button and a little button, put the little button in front of the big button. Then added these methods:
export function bigButton_onClick(event) {
console.log("Big button clicked");
$w("#bigButton").hide();
}
export function littleButton_onClick(event) {
console.log("Little button clicked");
}
When I click on the little button the console says “Little button clicked”. When I click on the big button the console says “Big button clicked” and it disappears.
Hello @David, Did you find a way to do this?
I have a box with a button inside, and I want both the button and the container box to be clicked independently.
Thanks!
Never encountered this problem myself, but maybe you could do something like:
export function container1_click(event) {
$w('#text1').onClick(() => { event.preventDefault(); });
}
Nope, that’s the point. The wix event object doesn’t expose preventDefault, stopPropagation, or stopImmediatePropagation.