如何添加一个 EventListener 来监听除特定元素之外的 window 上的每次点击

Question

我有一个简单的 html 文件，它只有一个输入字段：

<input value="Hello">

我想要的是当用户单击输入字段时，he/she 将能够编辑文本，然后一旦完成编辑并单击 其他地方（不在文本字段内）在 window 中，用户将收到有关新输入的警报。

我的JS代码是：

$('document').ready(function(){
   $($('input')[0]).click(function() {
      alert('OK1');
      $(this).addClass('input-edit');
      $($(window)[0]).click(function() {
         alert('OK2');
         var text = $('input').value;
         alert(text);
      });
      $($('input')[0]).click(function(e) {
         e.stopPropagation();
         return false;
      });
   })
})

但是，当我运行代码时，我看到当我第一次在文本字段中单击时，代码的行为就像它自动获得了两次点击，所以我收到了 3 个警报：

OK1 OK2 undefined

您知道我可以做些什么来确保第二次点击的行为符合我的预期吗？

Answer 1

我认为您错过了模糊事件。元素失去焦点（在本例中为光标）的事件称为 blur 事件。您只需要添加一个事件处理程序来模糊输入元素的事件。尝试

$('input').blur(function(e) {
    alert($(this).val());
}

由于您只有一个输入元素，因此不需要获取索引为 0 的元素。

Answer 2

提供目标和 id 或我在下面所做的任何事情，然后尝试模糊事件。此外，这里是工作 JSFiddle https://jsfiddle.net/wr1ncvbn/

<input type="text"/ id="target">

$('#target').blur(function() {
    alert($(this).val());
});

如何添加一个 EventListener 来监听除特定元素之外的 window 上的每次点击

How to add an EventListener that listens every click on window besides a specific element

javascript

jquery

stoppropagation

eventhandler