如何使用JavaScript检测div元素是否绑定onClick事件

根据你给出的JSX示例，分两种场景提供实用解决方案：

一、React组件内部（运行时判断JSX元素） #

如果是在React组件里管理这些div元素，直接通过检查元素的props就能判断是否存在onClick属性，进而过滤掉带事件的元素：

// 模拟你的两个div元素
const divElements = [
  <div id="test" onClick={() => function123()}>
    {children}
  </div>,
  <div id="test">
    {children}
  </div>
];

// 过滤掉带有onClick事件的div
const filteredDivs = divElements.filter(div => !div.props.onClick);

这种方式适用于组件内部生成或维护元素的场景，直接通过React元素的props就能快速完成判断。

二、浏览器DOM层面检测（页面渲染后判断） #

React使用合成事件绑定，不会直接把函数挂载到DOM元素的onclick属性上，所以不能用element.onclick直接判断，可通过以下两种方式处理：

1. 调试场景：用Chrome专属API查看 #

在Chrome控制台中，使用getEventListeners()方法可以查看DOM节点绑定的所有事件：

const div = document.querySelector('#test');
// 判断是否有click事件绑定
const hasOnClick = !!getEventListeners(div).click?.length;

注意：这个API是Chrome调试工具专属，不能用于生产环境代码。

2. 生产场景：主动标记元素 #

在React组件渲染时，给带有onClick的div添加自定义属性作为标记，后续通过DOM查询识别并忽略：

// 渲染时给带onClick的div加标记
<div id="test" onClick={() => function123()} data-has-onclick="true">
  {children}
</div>
<div id="test">
  {children}
</div>

// 后续检测并忽略
const divs = document.querySelectorAll('#test');
divs.forEach(div => {
  if (div.getAttribute('data-has-onclick')) {
    // 示例操作：隐藏或移除该元素
    div.style.display = 'none';
  }
});

这种方式依赖明确的自定义标记，不依赖React内部机制，适合生产环境使用。

内容的提问来源于stack exchange，提问作者Some Random user