event.stopPropagation не может прекратить пузыриться до родителя - PullRequest
Новая
       10

event.stopPropagation не может прекратить пузыриться до родителя

2 голосов
/ 02 мая 2019

У меня есть события onContextMenu, прикрепленные к родительскому и дочернему компонентам.Оба являются реагирующими синтетическими событиями, но event.stopPropagation не может это остановить.

ОБА РЕАГИРОВАННЫЕ СОБЫТИЯ

Редактировать: у меня было прозрение, потому чтоя увлажняю внутри редактируемого содержимого div?и Reaction не знает, что оба компонента являются дочерними и родительскими, так как реагирует, игнорирует содержимое внутри редактируемых элементов div.Есть ли способ заставить реагировать понять это?

ParentComponent 

 const CMSCheckBox = (props, ref) => {
      openMenu=()=>{
        alert("Parent");
    }
   //hydrating components based on props
    useEffect(() => {
    if (props.objValue && props.objValue.SubElements) {
       props.objValue.SubElements.map(SubElement => {
           let strDivId = SubElement.DivId ? SubElement.DivId : "element_" + SubElement.iElementId;
           if (!document.getElementById(strDivId)) {
               let objSavedSel = ApplicationState.GetProperty("objActiveSelection");
               if (objSavedSel && objSavedSel != null) {
                   let divElement;
                   divElement = document.createElement("span");
                   ApplicationState.SetProperty("objActiveDiv",
                    {
                       strDivId: strDivId
                   });
                   divElement.id = strDivId;
                   divElement.setAttribute('type', SubElement.iElementType.toLowerCase() + 'div');
                   let range = document.createRange();
                   range.setStart(document.getElementById(objSavedSel.divId),
              0);
                   range.collapse(true);
                   var nodeStack = [document.getElementById(objSavedSel.divId)
              ], node, foundStart = false, stop = false, charIndex = 0;
                   while (!stop && (node = nodeStack.pop())) {
                       if (node.nodeType == 3) {
                           var nextCharIndex = charIndex + node.length;
                           if (!foundStart && objSavedSel.intStart >= charIndex && objSavedSel.intStart <= nextCharIndex) {
                               range.setStart(node, objSavedSel.intStart - charIndex);
                               foundStart = true;
                  }
                           if (foundStart && objSavedSel.intEnd >= charIndex && objSavedSel.intEnd <= nextCharIndex) {
                               range.setEnd(node, objSavedSel.intEnd - charIndex);
                               stop = true;
                  }
                           charIndex = nextCharIndex;
                } else {
                           var i = node.childNodes.length;
                           while (i--) {
                               nodeStack.push(node.childNodes[i
                    ]);
                  }
                }
              }
                   range.deleteContents();

                   range.insertNode(divElement); //insert div to hydrate
            }
          }

           let Element = UndoRedo(ElementController.getComponent(SubElement.iElementType.toLowerCase()));
           ReactDom.hydrate(<Provider store={store
          } ><Element ElementJson={SubElement
          } PageId={props.PageId
          } Mode={props.Mode
          } /></Provider>, document.getElementById(strDivId));
           // setTimeout(() => {
          //     onContentChange();
          // }, 100);
        })
      }
    return () => {
       divRef.current.removeEventListener("blur", onContentChange_Callbck);
       divRef.current.removeEventListener("mousedown", onMouseDown_Callbck);
      }
    },
    [state, props
    ])
     retrun (<div onContextMenu={} contenteditable="true"></div>)
    }

Дочерние компоненты гидратируются в редактируемый содержимым div в родительском компоненте на основе позиции щелчка 

const Child =(props,ref) =>{
  const openmenu=(e)=>{
   e.stopPropagation(); //doesnt work
    alert("child");
  }
 return (<div onContextMenu={openmenu}>Test</div>);
}

оба события контекстного меню вызываются

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Итак, проблема в том, что указано в моем редактировании, так как мой div редактируемый контент, response не знает, что оба являются родительскими и дочерними элементами dom, и, следовательно, ничего не делает, когда вызывается stopPropagation.

Решение, которое я нашел, хотя и было довольно грязное, состояло в том, чтобы добавить дочерний компонент как ref , а затем присоединить обработчик события реакции, используя addEventListener метод javascript. так как событие больше не является синтетическим и не управляется реакцией, событие больше не всплывает до родителя.

1 голос
/ 02 мая 2019 
e.nativeEvent.stopImmediatePropagation();

в этом справочном руководстве документируется SyntheticEvent

...