使用tab可以进行选中，用enter触发点击事件。
tabindex属性可以添加 Tab键的focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
.box {
width: 500px;
height: 500px;
border: solid 1px red;
}
.demo {
width: 30px;
height: 30px;
margin: 10px;
border: solid 1px black;
outline: none;
}
@keyframes demo1 {
0% {
opacity: 1;
outline-offset: 10px;
}
0% {
opacity: 0.5;
}
100% {
opacity: 1;
outline-offset: 2px;
}
}
div:focus {
outline: 2px dashed #000000;
outline-offset: 2px;
animation: demo1 100ms 10ms;
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="box" tabindex="0">
<div class="demo" tabindex="0"></div>
<div class="demo" tabindex="0"></div>
<div class="demo" tabindex="0"></div>
<div class="demo" tabindex="0"></div>
</div>
</body>
<script>
$('.demo').on("keydown", function (event) {
var keyCode = event.keyCode || event.which;
if (keyCode == "13") {
$(this).trigger("click");
}
});
$('.demo').on("click", function (event) {
alert("事件触发成功")
});
</script>
</html>
效果图