模糊事件未觸發<label>-找不到用於處理模糊隱藏的解決方法</label> <label><input></label> <label>文本域</label>

Question

TL; DR如何使這個自解釋性的JSFiddle起作用？

從W3C ：

當元素通過定位設備或通過制表導航失去焦點時，就會發生模糊事件。 此事件對以下元素有效：LABEL，INPUT，SELECT，TEXTAREA和BUTTON。

HTML的基本思想：

<form>
    <label>
        <input type="text" />
        <a href="#">after focusing in input, there should be no blur when clicking here</a>
    </label>
</form>
<a href="#">but blur should fire when clicking here</a>

和JS：

$("form, label").on("blur", function() {
    alert("you're not going to see this");
});

沒用 這個JSFiddle中有一個更說明性的示例。

我也試過focusout ，與此的jsfiddle ，但是（大概是因為它從輸入冒泡），它總是火災。

我可能會用這樣的hack來獲取所需的東西： https : //stackoverflow.com/a/5049387/458614，但我不想這樣做。

---

編輯：有很多相關的問題，我已經閱讀了所有可以找到的內容，沒有任何幫助。 有人談論在form或label元素上設置tabindex=0 。 我已經嘗試過各種排列方式，但無濟於事。 JSFiddle在這里 。 如果將其放在form ，則在form外部單擊時會觸發blur事件。 但是，它不適用於任何子項：如果您單擊input ，然后在form外部，它將不會接任何東西。

---

編輯2：到目前為止，我還不太了解部分答案，而且似乎都沒有...有效。 無論如何，要澄清一下，這是我要完成的工作：

在我的應用中，您可以向文檔添加標簽。 當您單擊“添加標簽”按鈕時，一個先前隱藏的文本輸入字段將彈出並聚焦。 然后...

1. 單擊外部（模糊時）應再次關閉文本輸入字段
2. 按Enter鍵應添加標簽並關閉輸入字段
3. 單擊“添加標簽”按鈕也應添加標簽並關閉輸入字段

問題是＃1和＃3不兼容。 根據文本字段是打開還是關閉，“添加標簽”按鈕需要執行不同的操作，但是由於我只能通過在文本字段上執行onblur事件來實現＃1，因此在執行任何操作時都會關閉文本字段發生在＃3的“添加標簽”按鈕上。

這是迄今為止我最努力的JSFiddle 。

Answer 1

我認為您正在尋找的是

e.stopPropagation();

此小提琴在這里顯示了一些不同的處理方式... ...將皮革放到窗口單擊上（無論如何都會使輸入模糊），除了標簽外，這將使click事件停止在標簽內。

編碼愉快！

Answer 2

使用下面的代碼來實現所需的

  $(document).on("blur", "label",function() {
       $("div").append("form or label blurred<br>");
   });

這是演示小提琴

Answer 3

試試這個它應該工作

.focus {
border-color:red;
}


$(document).ready(function() {    

    $('input').blur(function(){
            $('input').removeClass("focus");
        })
             .focus(function() {        
                 $(this).addClass("focus")
        });

});

Answer 4

在您的Fiddle中添加這段js。 您為標簽添加了偵聽器，但錨標簽發生模糊。

      $("form a").on("blur", function() {
              $("div").append("form or label blurred<br>");
       });

Answer 5

根據您的解釋，我創建了一個演示

$("form > label >a").on("blur", function() {
      return false
});

    $("#outsideform > a").on("blur", function() {
    alert("but blur should fire when clicking here");
});

在此處查看演示

Answer 6

有一段時間，我發布了一個中間的開發。 但這絕對會幫助您在確切的位置尋找。 jQuery實現，而不是您的javascript 。 這是真正的關注。

我在不同的地方添加了3行。 沒有大的變化。

1. 添加了|| $("input").css("visibility") == "visible" || $("input").css("visibility") == "visible"對“ if”條件|| $("input").css("visibility") == "visible"
2. 添加了$("input").css("visibility","hidden"); 到內部其他條件
3. $("input").css("visibility","visible"); 到外部（最后一個）其他條件。

請注意，這是中間步驟，您需要在提交非空文本后單擊兩次。 如果有時間，我會發布正確的工作信息。 這是小提琴。

Answer 7

tobek，到目前為止，您的JSFiddle用我最大的努力就快到了 。 問題是您的選擇器位於代碼本部分的底部：

$("input").on("blur", function(){
    $("input").hide();
});

當您說：“問題：我們永遠不會進入這里，因為它已經因為輸入模糊而被隱藏了，”您在注釋中正確地指出了問題。

將上面的部分更改為此，我想您會找到想要的東西。

$("input-blur label").on("blur", function(){
    $("input").hide();
});

由於“添加標簽”鏈接位於標簽內，因此單擊它不會觸發“模糊”功能。