jQuery綁定和JavaScript event.stopPropagation（）

我有一個包含兩個div的TD。第一個div包含文本並可見。第二個div包含一個textarea，默認情況下是隱藏的。使用下面的代碼，我已經綁定到TD的點擊事件，並交換對點擊的div的可見性：jQuery綁定和JavaScript event.stopPropagation（）

$(".tdEstimatorNote").click(function (e) 
{ 
    $(this).find("div:first").toggle("400"); 
    $(this).find("div:first").next().toggle("400"); 
    $(this).find(".estimatorNotesTA").focus(); 
});

雖然這個工作，它造成的問題與textarea的。當我試圖在textarea變得可見之後將焦點放在textarea上時，div會再次交換可見性（因爲我綁定了TD的click事件）。所以，我的解決方案，停止事件傳播：

$(".estimatorNotesTA").click(function (event) 
{ 
    event.stopPropagation(); 
});

這種作品 - 有點。我現在可以自由編輯和點擊textarea，但是我無法選擇任何文本（我假設是因爲上面的jQuery）。有可能我的假設是不正確的，因爲我無法通過鍵盤來選擇文本的範圍（shift + end或shift + home）。任何想法/建議？

在此先感謝！

來源

2011-07-08 James Hill

不知道問題出在哪裏從何而來，但你可以只是測試文本區域是否被點擊：

$(".tdEstimatorNote").click(function (e){ 
    if(!$(e.target).hasClass('estimatorNotesTA')) { 
     //Toggle CSS class 
     // use method chaining :) 
     $(this) 
      .find("div:first").toggle("400"); 
       .next().toggle("400").end() 
      .end() 
      .find(".estimatorNotesTA").focus(); 
    } 
});

來源

2011-07-08 12:26:33

+1爲目標檢查。至於方法鏈，它有什麼好處嗎？就個人而言，我的代碼似乎比我的代碼更不可讀（個人偏好顯然）？仍然有範圍選擇問題... –

@JamesHill：你是否從textarea中刪除了點擊事件處理程序？你必須。如果這不能解決問題，那麼問題似乎就在別的地方。關於鏈接：至少應該執行'$（this）.find（「div：first」）。toggle（「400」）。next（）。toggle（「400」）'而不是搜索同一個元素兩次。你已經有了'div：first'的引用，你不需要再次搜索。 –

是的，我從textarea中刪除了click事件處理程序。關於二級搜索的好處。 –

您可以隨時使用「回家早」模式，這樣可以節省一個縮進級別，也許也有助於提高可讀性。

$(".tdEstimatorNote").click(function (e){ 
    if($(e.target).hasClass('estimatorNotesTA')) return; 

    //Toggle CSS class 
    // use method chaining :) 
    $(this) 
     .find("div:first").toggle("400"); 
     .next().toggle("400").end() 
     .end() 
     .find(".estimatorNotesTA").focus(); 
});

來源

2012-03-21 15:38:28 kroe

jQuery綁定和JavaScript event.stopPropagation（）

回答

相關問題