Stop propagation of click event on text box to the parent (also a box)

Ask the community
,
1

This question is similar to one found here but I’m creating a new thread to provide clarity on my specific situation and detail the approaches I’ve tried already.

I have a repeater on my page, and within that repeater I have many boxes that contain text boxes. I would like one of those text boxes to be clickable and, when that text box is clicked, the base box does not execute its onClick() event.

I have custom behavior for the base box:

export function quotebox_click(event) {
// When user clicks, navigate to the dynamic page
let id = event.context.itemId;
wixLocation.to(`/newpage/${id}`);
}

I also have custom behavior for the text box (inside the base box):

export function authorName_click(event) {
    // not super relevant what this code is, but it exists!
}

When the user clicks and the authorName_click(event) method is activated, I want the quotebox_click(event) method not to be activated.

What I’ve tried that hasn’t worked:

  1. Adding a button layered between the text box and the box itself to stop the event.
  2. Adding a click event to overwrite the box click handler with event.preventDefault() when the text is clicked. This doesn’t work, and I suspect it is because by the time this code is running, the box click handler with the full code has already been called.

Any thoughts would be much appreciated here!

2

Hi,

When you attach an element to a box (e.g. textbox to container box in your case) when you click on the attached element, the event is captured both for both attached elements and the element it’s attached to.

Currently, this is the expected behavior. To have two different click events for the text ad the container, you need to move the text the way so it’s not attached to the container.


You can submit the desired functionality as a feature request here .

3

Excellent, thanks for letting me know that’s expected @aleksf ! I’ve submitted a feature request.

4

Any news on this? specially looking for this feature to implement a custom quick view functionality of the store product gallery…

5

Did you already change it? stopPropagation() or preventDefault() dont work and trying to hack my way is pretty exhausting

6

I have found an easy way and works fine for me

  1. declare global variable and time out for it
let preventPropagation = false;
let preventPropagationTimeOut;

2.   and onClick event of child element set this var to true 
and setTimeOut to false(for mobile touch screen device)
, and onMouseOut set var to false

element.onClick(event=>{
    preventPropagation = true;
    if(preventPropagationTimeOut){clearTimeOut(preventPropagationTimeOut)}
    preventPropagationTimeOut = setTimeOut(()=>{preventPropagation = false},100)
    
    //-- your code to do unique think that not propageate event to parent element
})

element.onMouseOut(event=>{
    preventPropagation = false;
})

3.   finally in parent.onClick event (the parent element that you don't want the click event propagated to it)	

parenElement.onClick(event=>{
    if(preventPropagation ){return} //-- childElement click event cannot pass this check
    
    //--your code below to do some thing unique only on parent element click
    
})

You can made it to class and use set get function to reuse in the future

export class preventPropagetion(){
    constructor(){
        this.preventPropagation = false;
        this.preventPropagationTimeOut;
        this.preventPropagationSet = this.preventPropagationSet.bind(this);
        this.preventPropagationGet = this.preventPropagationGet.bind(this);
    }
    preventPropagationSet(bool){
        if(bool){
            this.preventPropagation = true;
            if(this.preventPropagationTimeOut){clearTimeOut(this.preventPropagationTimeOut)}
            this.preventPropagationTimeOut = setTimeOut(()=>{this.preventPropagation = false},100)
            return;
        }
        this.preventPropagation = false;        
    } 
    preventPropagationGet(){
        return this.preventPropagation;
    } 
}