單用戶行動發射兩個事件 - 第二個事件不會觸發

我遇到了這個問題，其中用戶的單個動作應該觸發兩個事件，但它只觸發第一個事件。單用戶行動發射兩個事件 - 第二個事件不會觸發

場景：

用戶輸入一些文本到一個特殊字段修改佈局對事件的內容，輸入文字，而無需離開後場，他們點擊一個按鈕。

發生了什麼事？

我在文本框上單擊事件，然後單擊按鈕上的事件。我所看到的是專注事件被解僱，但點擊事件從來沒有。

我這個包裹在一個的jsfiddle：

$('#theText').focusout(function(){ 
    $("#focusevent").text("Focusevent"); 
    console.log("focus"); 
}); 

$('#theButton').click(function(){ 
    $("#clickevent").text("Clickevent"); 
    console.log("click"); 
});

所以，如果你在文本框中單擊然後單擊我期望這兩個事件來觸發按鈕，但我們只看到焦點事件。

我通過讓mousedown事件觸發按鈕而不是點擊事件（這會在focusout事件之前觸發）來爲此設置一個臨時修復，但這導致了一些我不想看到的其他行爲和問題。由於那些我認爲最佳的解決方案是找到一種方法來獲得焦點和點擊事件。有沒有人有關於如何解決這個問題的想法？

編輯：看到最初的反應之後，我挖得更深一些，這裏的問題是，事件的內容事件改變頁面佈局，非常輕微地按下按鈕的位置下來。點擊事件在聚焦完成後觸發，但由於按鈕不再位於完全相同的位置，因此不會發生任何事情。

這裏有一個更新的小提琴，顯示我的問題 http://jsfiddle.net/fCz6X/11/

來源

2013-10-29 codewarrior

http://jsfiddle.net/fCz6X/8/使用的console.log – megawac

改變了你的代碼將文本添加到頁面insted的警報的 - 工作正常[這裏]（HTTP：// jsfiddle.net/fCz6X/9/） – 2013-10-29 15:31:50

@MikeW文本實際上已經實際移動按鈕，例如）http://jsfiddle.net/fCz6X/10/ – codewarrior

這是因爲你調用alert - 在focusout事件觸發，但瀏覽器識別之前你點擊該按鈕，警告框阻止它。

將您的事件處理程序更改爲console.log或其他非突兀的東西，您就可以。

來源

2013-10-29 15:27:01

謝謝，深入挖掘一點後，我看到了實際的問題。我的專注事件實際上是在做一些自定義事件並處理請求和響應，點擊事件正在提交一個表單。我認爲這個問題實際上可能與頁面佈局的變化有關。聚焦事件發生後，該按鈕不再位於同一地點，因此單擊事件不會觸發任何事件。讓我看看我是否可以將它封裝在一個新的小提琴中。 – codewarrior

我相信這是因爲focusout事件首先觸發，執行處理程序，然後alert然後阻止瀏覽器識別點擊。

用console.log而不是alert再試一次 - 它的侵襲性較小。

來源

2013-10-29 15:29:08

你是什麼意思的寄存器？如果你的意思是事件處理程序沒有被創建，那是不正確的。如果你的意思是說瀏覽器沒有意識到發生了點擊，那麼是的。你可以編輯澄清？ –

對不起，我感到困惑。我的意思是瀏覽器無法識別點擊事件。我會更新我的答案，以便更清楚。謝謝！ –

正如喬所說，阻塞警報呼叫是什麼打破事件。使用非阻塞呼叫您將看到兩個事件。

如果你真的需要執行這樣的警告，不過，你可以推遲調用「警報」，直到後來使用的setTimeout（）

$('#theText').focusout(function(){ 
    setTimeout(function() { // alert after all events have resolved 
     alert("focus left text box"); 
    }, 0); 
});

編輯：在更新後的提琴的原因click事件從未發生火災是因爲沒有發生點擊事件。如果您在mousedown下將按鈕從鼠標下移出，則不會有任何後續鼠標啓動「點擊」事件。

您可能需要重新考慮設計的其他方面。您使用'mousedown'的解決方案是您可以實現的最佳解決方案，因爲它是唯一真正發生的事件。

來源

2013-10-29 15:30:25

這是阻止的警報。某些瀏覽器安全防止當時觸發太多的window.alert。

使用其他觸發器時，它看起來。您可以嘗試console.log()

$('#theText').on("focusout",function(){ 
    $("#theText").val($("#theText").val()+"flb"); 
}); 

$('#theButton').on("click",function(){ 
    $("#theText").val($("#theText").val()+"but"); 
});

來源

2013-10-29 15:34:17 gasp

單用戶行動發射兩個事件 - 第二個事件不會觸發

回答

相關問題