Question

考虑this test case：

var arr = ["z","b","a"];
var temp = arr.splice(2);
arr = arr.sort().concat(temp);
console.log(arr);

HTML中的“占位符”元素，附加了侦听器。
两个安装在占位符上的React元素，它们本身连接了React侦听器。

反应uses event delegation and handles its listeners after the document，这意味着点击该复选框会产生如下日志：

const Component = (() =>
  <div onClickCapture={(e) => console.log('div click capture')}
    onClick={(e) => console.log('div click bubble')}>
    <input type='checkbox'
      onClickCapture={(e) => console.log('checkbox click capture')}
      onClick={(e) => console.log('checkbox click bubble')} />
  </div>
)

const placeholder = document.getElementById('placeholder')
placeholder.addEventListener('click',
  (e) => console.log('placeholder click capture'),
  /* useCapture= */true)
placeholder.addEventListener('click',
  (e) => console.log('placeholder click bubble'),
  /* useCapture= */false)

ReactDOM.render(<Component />, placeholder)

我正在开发一个浏览器扩展程序，用于在页面中安装新组件。我选择使用React，这个功能使得很难安装新组件作为已经附加了侦听器的现有元素的后代。如果我将一个侦听器附加到调用placeholder click capture placeholder click bubble div click capture checkbox click capture checkbox click bubble div click bubble的挂载点，那么它也会阻止事件到达event.stopPropagation()，从而由React处理。有没有办法让React在挂载点“内部”处理事件而不让它们从React挂载点冒出来？换句话说，要将事件限定为虚拟DOM吗？

如何模拟嵌入在页面中的React元素与其他侦听器的正常stopPropagation？

0 个答案: