2017-02-18 66 views
1

我有隻有一個輸入字段一個簡​​單的HTML文件:如何添加監聽每點擊窗口中的事件監聽除了特定元素

<input value="Hello"> 

我要的是那一刻的用戶點擊輸入字段,他/她將能夠編輯文本,然後一旦完成編輯並在窗口中點擊其他地方(不在文本框內),用戶將獲得新輸入的警報。

我的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不確定

你知不知道我能做些什麼,以確保第二次點擊的行爲如我所料?

+0

爲了更好understanding..You也應該在你的問題中添加小提琴..!這不是必要的,但這是一個很好的做法。並且更有吸引力的人解決您的問題:D –

回答

1

我想你錯過了模糊事件。當元素失去焦點時(或者在這種情況下爲光標)時,事件被稱爲blur事件。您只需添加一個事件處理函數來模糊輸入元素的事件。嘗試

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

由於只有一個輸入元素,因此不需要獲取0索引元素。

3

給和目標的ID或類似我在下面做的事情,並嘗試模糊事件。此外,這裏是工作的jsfiddle https://jsfiddle.net/wr1ncvbn/

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

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