可疑事件 - Jquery [英] Contenteditable Events - Jquery
问题描述
我在表格中添加了contenteditable prop。我使用keydown事件获取数据，当用户点击Enter时，它会获取新输入并模糊区域。
但是用户也可以点击输入区域以外的任何地方来模糊。（这是令人满意的功能）。我不能听这个动作。如何为此操作创建像keydown这样的事件监听器。
I added contenteditable prop in the table. I am getting data by using keydown event, when user hit "Enter" it takes the new input and blur the area. But user also can click anywhere except from the input area to blur.(this is contenteditable feature). And I can not listen this action. How can I create event listener like keydown for this action.
这适用于回车，但不能点击
This works for "Enter", but not click
<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());
}
});
推荐答案
有很多方法可以做到这一点，一个来了在我的脑海里，我要全球聆听mousedown事件，并决定在此基础上做什么，因为鼠标在模糊之前向下发射： FIDDLE
There are many ways of doing this, one that came to my mind is to listen globally to mousedown events, and decide what to do based on that since mouse down fires before the blur: FIDDLE
如果您在红色方块，则不会出现模糊。
If you are on the red square, blur will not take place.
!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);
}()
这篇关于可疑事件 - Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
