我在表中添加了contenteditable道具。我使用keydown事件获取数据，当用户点击"Enter"时，它会接受新的输入并模糊区域。但用户也可以点击除输入区域以外的任何地方进行模糊处理。(这是内容可编辑功能(。我不能听这个动作。如何为该操作创建类似keydown的事件侦听器。
这适用于"输入"，但不适用于点击
<html>
<head></head>
<body>
<table id="table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1</th>
<td contenteditable="true">Editable1</td>
<td contenteditable="true">Editable2</td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</body>
</html>
$('#table tbody tr').keydown(function (event){
enter = event.which == 13,
el = event.target;
if(enter){
el.blur();
console.log("entered");
console.log($(this).find(':nth-child(2)').html());
console.log($(this).find(':nth-child(3)').html());
}
});
有很多方法可以做到这一点，我想到的一种方法是全局监听鼠标按下事件，并基于此决定该做什么，因为鼠标按下在模糊之前触发：FIDDLE
如果您在红色方块上，则不会发生模糊。
!function(){
//set a variable to listen to
var blur = true;
//your original keydown
document.getElementById("some").addEventListener("keydown",function(e){
if(e.which === 13){
e.currentTarget.blur();
console.log("entered");
}
},false);
//add a blur listener to modify, e.preventDefault won't work
document.getElementById("some").addEventListener("blur",function(e){
//decide what to do based on this variable
if(!blur){
e.currentTarget.focus();
}
},false);
//listen globally to click events, and set blur variable based on a condiditon
window.addEventListener("mousedown",function(e){
if(!document.activeElement){return};
//a condition, if we are on red square, blur won't take place
if(
document.elementFromPoint(e.clientX,e.clientY) === document.getElementById("some2")
){
blur = false;
} else {
blur = true;
}
},false);
}()