如何将网格特定区域设置为不可点击？附交互式网格实现代码

嘿，我看了你的网格代码，要实现特定区域不可点击其实挺简单的，这里有几个实用的方案，你可以根据自己的需求来选：

方法1：在点击回调中判断并拦截逻辑 #

这个方法适合你需要在用户点击禁用单元格时给出提示的场景。我们可以先定义好禁用的单元格列表，然后在点击触发时先做判断，如果是禁用区域就直接返回，不执行后续的点击逻辑：

var lastClicked;
// 定义需要禁用的单元格（行和列都是从0开始计数哦）
var disabledCells = [{row: 2, col: 3}, {row: 5, col: 5}, {row: 1, col: 1}];

var grid = clickableGrid(10,10,function(el,row,col,i){
  // 先检查当前单元格是否在禁用列表里
  var isDisabled = disabledCells.some(cell => cell.row === row && cell.col === col);
  if (isDisabled) {
    console.log("这个区域不可点击哦～");
    return; // 直接终止，不执行下面的点击逻辑
  }

  // 下面是你原本的点击处理逻辑
  console.log("You clicked on element:",el);
  console.log("You clicked on row:",row);
  console.log("You clicked on col:",col);
  console.log("You clicked on item #:",i);
  el.className='clicked';
  if (lastClicked) lastClicked.className='';
  lastClicked = el;
});

document.body.appendChild(grid);

// 补全你的clickableGrid函数（假设你之前的代码框架是这样的）
function clickableGrid( rows, cols, callback ){
  var i=0;
  var grid = document.createElement('table');
  grid.className = 'grid';
  for (var r=0;r<rows;++r){
    var row = document.createElement('tr');
    grid.appendChild(row);
    for (var c=0;c<cols;++c){
      var cell = document.createElement('td');
      // 提前给禁用单元格加样式，让用户一眼看出来不可点击
      var isDisabled = disabledCells.some(cell => cell.row === r && cell.col === c);
      if (isDisabled) {
        cell.classList.add('disabled');
      }
      cell.addEventListener('click',(function(el,r,c,i){
        return function(){
          callback(el,r,c,i);
        }
      })(cell,r,c,i++));
      row.appendChild(cell);
    }
  }
  return grid;
}

再配合一点CSS样式，让禁用单元格更直观：

.grid td {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
.grid td.clicked {
  background-color: #4CAF50;
}
.grid td.disabled {
  background-color: #eee;
  cursor: not-allowed; /* 鼠标变成禁止样式 */
}

方法2：用CSS直接阻止点击事件 #

如果不需要给用户提示，只是单纯想让某些区域无法点击，用CSS的pointer-events: none是最简洁的方式——浏览器会直接忽略这个元素的所有点击事件，连回调都不会触发：

只需要在上面的CSS里给.disabled类加上一行：

.grid td.disabled {
  background-color: #eee;
  cursor: not-allowed;
  pointer-events: none; /* 关键：完全阻止点击事件 */
}

这样修改后，点击禁用单元格时不会有任何反应，连控制台的提示都不会出现，适合纯视觉上的禁用需求。

方法3：初始化时不给禁用单元格绑定点击事件 #

如果你的禁用区域是固定的，从一开始就不需要这些单元格可点击，那可以在创建单元格时直接跳过事件绑定，这样更节省性能：

修改clickableGrid函数：

function clickableGrid( rows, cols, callback ){
  var i=0;
  var grid = document.createElement('table');
  grid.className = 'grid';
  for (var r=0;r<rows;++r){
    var row = document.createElement('tr');
    grid.appendChild(row);
    for (var c=0;c<cols;++c){
      var cell = document.createElement('td');
      var isDisabled = disabledCells.some(cell => cell.row === r && cell.col === c);
      if (isDisabled) {
        cell.classList.add('disabled');
        row.appendChild(cell);
        continue; // 跳过事件绑定，直接添加到行里
      }
      // 只给可点击的单元格绑定点击事件
      cell.addEventListener('click',(function(el,r,c,i){
        return function(){
          callback(el,r,c,i);
        }
      })(cell,r,c,i++));
      row.appendChild(cell);
    }
  }
  return grid;
}

这种方法的好处是禁用单元格从根源上就没有点击事件，不会有任何冗余的判断逻辑。

内容的提问来源于stack exchange，提问作者Failed Hackerman