如何仅让包含文本内容的div元素具备可点击属性？

针对你开发的字母方块需求，这里提供几种实用的实现方式：

1. 初始化检查+手动更新（静态/手动修改内容场景） #

先获取目标元素，通过判断文本内容是否为空（去除首尾空格），来切换点击事件和光标样式：

// 获取字母容器
const letterBall = document.getElementById('letter-ball-1');

// 封装更新可点击状态的函数
function updateClickState() {
  const hasValidContent = letterBall.textContent.trim() !== '';
  if (hasValidContent) {
    // 有内容时添加点击事件和指针光标
    letterBall.onclick = () => { location.href='#' };
    letterBall.style.cursor = 'pointer';
  } else {
    // 无内容时移除点击事件，恢复默认光标
    letterBall.onclick = null;
    letterBall.style.cursor = 'default';
  }
}

// 页面加载时初始化状态
updateClickState();

// 之后如果手动修改了div内容，调用updateClickState()即可更新状态

2. 自动监听内容变化（动态更新场景） #

如果游戏中字母是动态生成/修改的，用MutationObserver监听元素内容变化，自动同步可点击状态：

const letterBall = document.getElementById('letter-ball-1');

function updateClickState() {
  const hasValidContent = letterBall.textContent.trim() !== '';
  letterBall.onclick = hasValidContent ? () => { location.href='#' } : null;
  letterBall.style.cursor = hasValidContent ? 'pointer' : 'default';
}

// 初始化状态
updateClickState();

// 创建监听器，监听文本内容变化
const observer = new MutationObserver(updateClickState);
// 监听元素的子节点、文本数据变化
observer.observe(letterBall, { 
  childList: true, 
  subtree: true, 
  characterData: true 
});

3. CSS类配合（更易维护的写法） #

用CSS类管理样式，逻辑更清晰：

/* 定义可点击样式类 */
.letter-clickable {
  cursor: pointer;
}

const letterBall = document.getElementById('letter-ball-1');

function updateClickState() {
  const hasValidContent = letterBall.textContent.trim() !== '';
  if (hasValidContent) {
    letterBall.classList.add('letter-clickable');
    letterBall.onclick = () => { location.href='#' };
  } else {
    letterBall.classList.remove('letter-clickable');
    letterBall.onclick = null;
  }
}

updateClickState();

// 动态场景同样添加MutationObserver监听

内容的提问来源于stack exchange，提问作者Tyson L