Question

我为一个创建交互式网格的项目制作了以下代码：

var lastClicked;
    var grid = clickableGrid(10,10,function(el,row,col,i){
    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);

    function clickableGrid( rows, cols, callback ){
        var i=0;
        var grid = document.createElement('table');
        grid.className = 'grid';
        for (var r=0;r<rows;++r){
            var tr = grid.appendChild(document.createElement('tr'));
            for (var c=0;c<cols;++c){
                var cell = tr.appendChild(document.createElement('td'));
                cell.innerHTML = ++i;
                cell.addEventListener('click',(function(el,r,c,i){
                    return function(){
                        callback(el,r,c,i);
                    }
                })(cell,r,c,i),false);
            }
        }
        return grid;
    }

我想让网格中的某些单元格无法点击并编写一些不起作用的单元格：

        var incliquable = [document.getElementById("1"),document.getElementById("2"),document.getElementById("21"),document.getElementById("22"),document.getElementById("23"),document.getElementById("24"),document.getElementById("25"),document.getElementById("26"),document.getElementById("27"),document.getElementById("54"),document.getElementById("55"),document.getElementById("56"),document.getElementById("57"),document.getElementById("58"),document.getElementById("59"),document.getElementById("60"),document.getElementById("80"),document.getElementById("70")];
    if (element = incliquable) {
        document.getElementById(.grid td).style.cursor = pointer-events: none;
    }

如果你能帮我找到一种方法让CSS中的指针改为“pointer-events：none”以使单元格不可点击，我真的很感激。

Answer 1

将代码更改为类似内容应该会有所帮助：

if (incliquable.indexOf(element) >= 0) {
  element.style.cursor = 'not-allowed';
  element.style['pointer-events'] = 'none';
}

这假设您的代码正确地将element设置为您正在针对incliquable中列出的元素进行测试的DOM元素。

如何使网格的某些区域不可点击？

1 个答案: