你如何在反應時全局禁用 DOM Mouseenter 事件

Question

我正在寫一個插件，我希望我能在某個時候禁止一些 dom 元素 mouseenter 事件，這些 dom 元素不是我能控制的，例如在使用原生 js 時

<body>
  <div>
    <div id="test"></div>
  </div>
  <script>
    const test=document.getElementById('test')
    test.addEventListener('mouseenter', () => {
      console.log('test mouseenter')
    })

    document.addEventListener('mouseenter', (e) => {
      e.stopPropagation()
    }, true)
  </script>
</body>

測試元素的 Mouseenter 不再起作用。但是在 react 中，它不起作用。like

import React, { useState } from 'react';
document.addEventListener('mouseenter', (e) => {
  e.stopPropagation()
}, true)
export default () => {
  const handleMouseEnter = () => {
    console.log('entery');
  }

  return (
    <div onMouseEnter={handleMouseEnter} >
      test
    </div>
  );
}

應該怎么做才能達到原生JS的效果

Answer 1

React-17 文檔說：

“當文檔上觸發 DOM 事件時，React 會確定要調用哪個組件，然后 React 事件會向上“冒泡”通過您的組件。但在幕后，本機事件已經冒泡到文檔級別，React安裝其事件處理程序。”

如果頁面上有多個 React 版本，它們都會在頂部注冊事件處理程序。 這會破壞 e.stopPropagation()：如果嵌套樹停止傳播事件，外部樹仍會接收它。 這使得嵌套不同版本的 React 變得困難。 這種擔憂不是假設性的——例如，Atom 編輯器在四年前就遇到過這種情況。

在 React 16 和更早的版本中，React 會對大多數事件執行 document.addEventListener()。 React 17 將在底層調用 rootNode.addEventListener() 。

此資源可能會有所幫助： https://reactjs.org/blog/2020/08/10/react-v17-rc.html

你如何在反應時全局禁用 DOM Mouseenter 事件

問題描述

1 個解決方案

解決方案1
0 2020-12-24 09:28:39

你如何在反應時全局禁用 DOM Mouseenter 事件

問題描述

1 個解決方案

解決方案1 0 2020-12-24 09:28:39

解決方案1
0 2020-12-24 09:28:39