通用HTML元素事件禁用策略：模拟disabled行为

import * as React from "react";

export default function UnstyledSwitches() {
  return (
    <div>
      <span tabIndex={0} onKeyDown={() => console.log("KeyDown event triggered!")}>
        这是一个可聚焦的测试文本
      </span>
    </div>
  );
}

<span disabled>这个元素被禁用</span>
<span>这个元素正常启用</span>
<div class="my-custom-element" disabled>自定义元素已禁用</div>

// HTML结构示例
// <span id="span1" disabled>Disabled Span</span>
// <span id="span2">Enabled Span</span>

document.addEventListener('DOMContentLoaded', () => {
  // 绑定点击事件到所有未被禁用的span元素
  document.querySelectorAll('span:not([disabled])').forEach(element => {
    element.addEventListener('click', () => {
      console.log(`点击了启用状态的span: ${element.textContent}`);
    });
  });

  // 绑定键盘事件到所有未被禁用的具有tabIndex的元素
  document.querySelectorAll('[tabIndex]:not([disabled])').forEach(element => {
    element.addEventListener('keydown', (event) => {
      if (event.key === ' ') { // 模拟按下空格键
        console.log(`键盘事件触发于启用状态的元素: ${element.textContent}`);
      }
    });
  });

  // 验证效果
  const disabledSpan = document.getElementById('span1');
  const enabledSpan = document.getElementById('span2');

  if (disabledSpan) {
    disabledSpan.addEventListener('click', () => {
      console.log('这条消息不应该被触发，除非手动绑定到禁用元素');
    });
  }
});

// HTML结构示例
// <div id="container">
//   <span disabled>Disabled Item 1</span>
//   <span>Enabled Item 2</span>
//   <span disabled>Disabled Item 3</span>
// </div>
// <button id="toggleBtn">Toggle First Span</button>

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container');
  const toggleBtn = document.getElementById('toggleBtn');

  // 将点击事件监听器绑定到父容器
  container.addEventListener('click', (event) => {
    const target = event.target;

    // 检查点击的目标元素是否是span，并且不带有disabled属性
    if (target.tagName === 'SPAN' && !target.hasAttribute('disabled')) {
      console.log(`通过事件委托点击了启用状态的span: ${target.textContent}`);
    }
  });

  // 将键盘事件监听器绑定到父容器
  // 注意：对于键盘事件，通常需要确保目标元素可聚焦或父元素监听
  // 这里以最外层document为例，实际应用中可根据需要绑定到更具体的父容器
  document.addEventListener('keydown', (event) => {
    const target = event.target;

    // 检查目标元素是否是span，具有tabIndex，并且不带有disabled属性
    if (target.tagName === 'SPAN' && target.hasAttribute('tabIndex') && !target.hasAttribute('disabled')) {
      if (event.key === ' ') {
        console.log(`通过事件委托键盘事件触发于启用状态的元素: ${target.textContent}`);
      }
    }
  });

  // 动态切换第一个span的禁用状态
  toggleBtn.addEventListener('click', () => {
    const firstSpan = container.querySelector('span:first-child');
    if (firstSpan) {
      if (firstSpan.hasAttribute('disabled')) {
        firstSpan.removeAttribute('disabled');
        firstSpan.setAttribute('tabIndex', '0'); // 确保可聚焦
        console.log('第一个span已启用');
      } else {
        firstSpan.setAttribute('disabled', '');
        firstSpan.removeAttribute('tabIndex'); // 禁用时移除聚焦能力
        console.log('第一个span已禁用');
      }
    }
  });
});

// 假设有一个函数来设置元素的禁用状态
function setElementDisabled(element, isDisabled) {
  // 移除所有现有监听器 (需要保存对监听器函数的引用才能移除)
  // ... 实际操作中，这会非常复杂，因为需要跟踪每个监听器

  if (isDisabled) {
    element.setAttribute('disabled', '');
    // 移除事件监听器（如果之前有绑定）
    // element.removeEventListener('click', clickHandler);
    // element.removeEventListener('keydown', keydownHandler);
  } else {
    element.removeAttribute('disabled');
    // 重新添加事件监听器
    // element.addEventListener('click', clickHandler);
    // element.addEventListener('keydown', keydownHandler);
  }
}

// 这种方法通常只适用于非常简单的场景，
// 因为管理事件监听器的引用以进行移除操作会非常繁琐和容易出错。
// 强烈推荐使用事件委托。