满足的事件 – Jquery

我在表格中添加了contenteditable prop。 我使用keydown事件获取数据，当用户点击“Enter”时，它会获取新输入并模糊区域。 但是用户也可以点击输入区域以外的任何地方来模糊。（这是令人满意的function）。 我不能听这个动作。 如何为此操作创建keydown等事件侦听器。

这适用于“输入”，但不适用于点击

   
 
 
 
col1
 
col2
 
col3
 
 
 
 
 
#1
 
Editable1
 
Editable2
 
 
 
    

---

 $('#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()); } }); 

Answer 1

有很多方法可以做到这一点，我想到的一个方法是全局收听mousedown事件，并根据鼠标在模糊之前向下点火来决定做什么： 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); }()