如何针对[{1}}耳机上的按钮分别处理 <!DOCTYPE html>
<html>
<head>
<style>
div.container {
display: flex;
height: 28vh;
}
div.number {
color: black;
background-color: rgb(140,0,0);
margin: 10px;
border: 10px solid black;
display: flex;
flex: 1;
font-size: 500%;
text-align: center;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<H1> Sliding Puzzle </H1>
<div class="container">
<div data-cell="0,0" class="number" >8</div>
<div data-cell="0,1" class="number">5</div>
<div data-cell="0,2" class="number">4</div>
</div>
<div class="container">
<div data-cell="1,0" class="number">6</div>
<div data-cell="1,1" class="number">7</div>
<div data-cell="1,2" class="number">2</div>
</div>
<div class="container">
<div data-cell="2,0" class="number">1</div>
<div data-cell="2,1" class="number">3</div>
<div data-cell="2,2" class="number"></div>
</div>
<script>
//By defaul to null as we will calculate
var emptyCell = null;
var numbersEls = document.getElementsByClassName('number');
for (var counter = 0, max = numbersEls.length; counter < max; counter++) {
var el = numbersEls[counter];
el.addEventListener('click', onNumberCellClick);
if(el.innerHTML == ''){
emptyCell = el;
}
}
function onNumberCellClick(clickedEl){
var clickedEl = this;
var cellIdentifier = getCellIdentifier(clickedEl);
//if empty cell not null
if(emptyCell){
var swapPositions = getCellSwapAvailability(cellIdentifier);
//We can move the cell
if(swapPositions.indexOf(emptyCell.dataset.cell) > -1){
emptyCell.innerHTML = clickedEl.innerHTML;
//Swap the position as the empty cell is changed;
emptyCell = clickedEl;
emptyCell.innerHTML = '';
}
}
}
function getCellSwapAvailability(identifier){
//Calculate where cell can be moved
var positions = [];
var pos = identifier.row + ',' + (identifier.col-1);
positions.push(pos);
var pos = identifier.row + ',' + (identifier.col+1);
positions.push(pos);
var pos = (identifier.row-1) + ',' + (identifier.col);
positions.push(pos);
var pos = (identifier.row+1) + ',' + (identifier.col);
positions.push(pos);
return positions;
}
function getCellIdentifier(cell){
var cellIndex = cell.dataset.cell;
var identifierArr = cellIndex.split(',');
var r = Number(identifierArr[0]);
var c = Number(identifierArr[1]);
return {row: r, col: c};
}
</script>
</body>
</html>
和key_down的事件（不同方法）？