Question

<pre>
<head>
....
</head>
<body>
<script src="Puzzle.js"></script>
<button id="button1" onclick="numbersDisplay();">Start New Game</button>
<div id="tableDiv" >
</div>
</pre>

我想做的只是忽略带有if else语句的特定div元素的onclicks。

if else语句工作正常，但我不知道如何忽略点击次数......

所有if if else只是为了防止用户点击div元素，我只想要一些div来进行可能的移动，这是我正在做的滑动谜题

for (var i = 0; i < table.length; i++) {
  for (var j = 0; j < table.length; j++) {

    output += '<div id="' + i + j + '" onclick="tableMove(this,\'' + table[i][j] + '\')">' + table[i][j] + '</div>';
  }
}
document.getElementById('tableDiv').innerHTML = output;

var search = document.querySelector('div').childNodes;
var array = [].slice.call(search);

for (var c in array) {

  elements = array[c];

  if (elements.textContent === '0') {
    zero = elements.id;
    document.getElementById(zero).innerHTML = '';

    i1 = zero[0];
    j1 = zero[1];

    posZero = table[i1][j1];
  }
}
}

function tableMove(num, val) {

  i2 = num.id[0];
  j2 = num.id[1];

  table[i1][j1] = table[i2][j2];
  table[i2][j2] = posZero;


  if (i1 !== i2 && j1 !== j2) {
    document.getElementById(num.id).removeEventListener("click", tableMove);//<---this dont work in all if else if statements

      else if((i1=Number(i1)+1) === i2 && j1 === j2 ){
    document.getElementById(num.id).removeAttribute("onclick");

}
else if((i1=Number(i1)-1) === i2 && j1 === j2){
    document.getElementById(num.id).removeAttribute("onclick");

}
else if((j1 = Number(j1)+1) === j2 && i1 === i2){
    document.getElementById(num.id).removeAttribute("onclick");

}

else if((j1 = Number(j1)-1) === j2 && i1 === i2){
    document.getElementById(num.id).removeAttribute("onclick");

}

return numbersDisplay();

}

Answer 1

我用一个与你的场景类似的蓝色div做了一个例子。

单击div时，它将执行JS并调用事件StopPropagation。

document.querySelector('.div').addEventListener(
	"click",
  function(e){
    document.querySelector('p').innerHTML = "Do your if/else code here!";
    e.stopPropagation();
	},
	true
)

div {
  display: inline-block;
  width: 120px;
  height: 120px;
  background: blue;
  margin: 7px;
}

<div class="div">
</div>

<p>
Click on blue div, it will call the JS
</p>

Answer 2

只为您的无法点击的div使用特定的课程？例如

.unclickable {
    pointer-events: none;
}

忽略特定div元素的onclick

2 个答案: