堆棧內存溢出
  簡體   English   中英

$（event.target）.closest（）。隱藏div的長度並不總是有效。任何替代品？

[英]$(event.target).closest().length to hide div doesn't always work. Any alternatives?

 原文  2017-11-15 02:44:52  9   5    javascript/ jquery/ html/ css

問題描述

我使用$(event.target).closest("#divID").length來隱藏div當用戶點擊它時，但是如果div是可見的，我點擊日期（datepicker）它贏了' t隱藏div 。

此外，如果我點擊<select>有時它隱藏它有時它不會。

有什么更好的解決方案可以在點擊其他內容時隱藏div嗎？

我的實施錯了嗎？

ps： #log_in是登錄按鈕， #log_in_form是我要在外部點擊時隱藏的form ， #log_in_container是包含#log_in和#log_in_form的div

更新：我剛注意到在Windows 10和Linux ubuntu 16.04上的消失是不一樣的。 在使用谷歌瀏覽器使用谷歌瀏覽器的PC上，表格在第一次點擊時消失了（這是理想的功能），但如果我選擇日期，它仍然不會消失。 雖然在谷歌Chrome上的Linux ubuntu 16.04上，它就像我上面描述的那樣（在選擇日期時不會消失，並且在你選擇的第一次點擊時也不會消失）

示例基於Andrei對代碼段的回答 

 $(document).on('click', function(e){ if($(e.target).closest('#log_in').is('#log_in')) { $('#log_in_form').fadeIn(); } else if(!$(e.target).closest('#log_in_container').is('#log_in_container')) { $('#log_in_form').fadeOut(); } }) 
 #log_in_container{ display:inline-block; width:122px; height:58px; margin-left:60px; background-color:gray; } #log_in{ display:block; width:120px; height:28px; text-align: center; border: 1px solid red; font-size:16px; background-color:yellow; vertical-align: top; } #log_in_form{ display:none; position:absolute; width:120px; height:28px; text-align: center; background-color: green; border: 1px solid blue; } .type{ display:inline-block; width:120px; height:30px; text-align: center; border: 1px solid red; font-size:16px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); }); </script> <title></title> </head> <body> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option> <option value="0">Spiderman</option> <option value="1">Iron man</option> <option value="2">Deadpool</option> </select> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option> <option value="0">Kebab</option> <option value="1">Mousaka</option> <option value="2">Noodles</option> </select> <div id="log_in_container"> <div id="log_in">Log_In_button</div> <div id ="log_in_form">login_form</div> </div> <div id="datepicker"></div> </body> </html>

在上面的代碼片段中，如果單擊Log_in_button，則會顯示Log_in_form。 如果然后你點擊它不會消失的日期，然后點擊一個選擇Log_in_form仍然不會消失，之后點擊下一步選擇Log_in_form仍然可見。 我想這樣做，以便它在這些場合消失（如選擇彈出窗口）。 這可能嗎？

5 個解決方案

解決方案1
 4  2017-11-25 21:21:24

jQuery僅適用於事件冒泡（事件從目標元素開始並處理 DOM樹，引發單擊事件直到它到達頂級document ）。 正如您在ui-datepicker看到的那樣，潛在的問題是元素可以通過使用event.stopPropagation()取消冒泡，並且document永遠不會得到它。

相反，你需要使用原始的Javascript事件捕獲代替，其中頂層元素捕獲事件發生並傳遞下來的DOM樹。

W3C網站上的圖表很好地解釋了捕獲和氣泡流，並查看了這個問題以獲取更多詳細信息和跨瀏覽器實現。

您的代碼所需的更改很少，您只需使用document.addEventListener而不是$(document).on ： 

 document.addEventListener("click", function(e){ if($(e.target).closest('#log_in').is('#log_in')) { $('#log_in_form').fadeIn(); } else if(!$(e.target).closest('#log_in_container').is('#log_in_container')) { $('#log_in_form').fadeOut(); } }, true); 
 #log_in_container{ display:inline-block; width:122px; height:58px; margin-left:60px; background-color:gray; } #log_in{ display:block; width:120px; height:28px; text-align: center; border: 1px solid red; font-size:16px; background-color:yellow; vertical-align: top; } #log_in_form{ display:none; position:absolute; width:120px; height:28px; text-align: center; background-color: green; border: 1px solid blue; } .type{ display:inline-block; width:120px; height:30px; text-align: center; border: 1px solid red; font-size:16px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); }); </script> <title></title> </head> <body> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option> <option value="0">Spiderman</option> <option value="1">Iron man</option> <option value="2">Deadpool</option> </select> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option> <option value="0">Kebab</option> <option value="1">Mousaka</option> <option value="2">Noodles</option> </select> <div id="log_in_container"> <div id="log_in">Log_In_button</div> <div id ="log_in_form">login_form</div> </div> <div id="datepicker"></div> </body> </html>

正如您之前提到的，最初的<select>在Windows上的Chrome中有效，但在Linux上卻無效。 瀏覽器通常會將表單控件的呈現交給操作系統以實現視覺一致性，但這會導致行為不一致。 <select> s可能是基本表單控件中最不一致的，因為它們增加了復雜性。 這個問題證明了這個問題，特別是：

Linux上的Chrome 19：首先鼠標單擊展開選項[單擊事件未觸發]，然后單擊仍然存在的選項或選項，觸發單擊事件。

由於這是一個你無法控制的瀏覽器行為，我認為沒有辦法解決它 - 你只能處理它觸發的事件。 如果瀏覽器未觸發該事件，則無法對其做出反應。

解決方案2
 1  2017-11-27 06:02:47

您只需使用mouseup事件而不是click在日期點擊時使用。 

 $(document).on('mouseup', function(e){ if($(e.target).closest('#log_in').is('#log_in')) { $('#log_in_form').fadeIn(); } else if(!$(e.target).closest('#log_in_container').is('#log_in_container')) { $('#log_in_form').fadeOut(); } }) 
 #log_in_container{ display:inline-block; width:122px; height:58px; margin-left:60px; background-color:gray; } #log_in{ display:block; width:120px; height:28px; text-align: center; border: 1px solid red; font-size:16px; background-color:yellow; vertical-align: top; } #log_in_form{ display:none; position:absolute; width:120px; height:28px; text-align: center; background-color: green; border: 1px solid blue; } .type{ display:inline-block; width:120px; height:30px; text-align: center; border: 1px solid red; font-size:16px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); }); </script> <title></title> </head> <body> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option> <option value="0">Spiderman</option> <option value="1">Iron man</option> <option value="2">Deadpool</option> </select> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option> <option value="0">Kebab</option> <option value="1">Mousaka</option> <option value="2">Noodles</option> </select> <div id="log_in_container"> <div id="log_in">Log_In_button</div> <div id ="log_in_form">login_form</div> </div> <div id="datepicker"></div> </body> </html>

解決方案3
 1  2017-11-27 18:10:11

除了dateoicker <td>之外，您的代碼正在運行。 這真的很奇怪

但是我們仍然可以使用jQuery ui datepicker中的onSelect方法來破解它。 

 $(document).on('click', function(e){ if($(e.target).closest('#log_in').is('#log_in')) { $('#log_in_form').fadeIn(); } else if(!$(e.target).closest('#log_in_container').is('#log_in_container')) { $('#log_in_form').fadeOut(); } }) 
 #log_in_container{ display:inline-block; width:122px; height:58px; margin-left:60px; background-color:gray; } #log_in{ display:block; width:120px; height:28px; text-align: center; border: 1px solid red; font-size:16px; background-color:yellow; vertical-align: top; } #log_in_form{ display:none; position:absolute; width:120px; height:28px; text-align: center; background-color: green; border: 1px solid blue; } .type{ display:inline-block; width:120px; height:30px; text-align: center; border: 1px solid red; font-size:16px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker({ onSelect: function(i, e){ $('#log_in_form').fadeOut(); } }); }); </script> <title></title> </head> <body> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option> <option value="0">Spiderman</option> <option value="1">Iron man</option> <option value="2">Deadpool</option> </select> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option> <option value="0">Kebab</option> <option value="1">Mousaka</option> <option value="2">Noodles</option> </select> <div id="log_in_container"> <div id="log_in">Log_In_button</div> <div id ="log_in_form">login_form</div> </div> <div id="datepicker"></div> </body> </html>

解決方案4
 0  2017-12-01 10:28:58

我有一個建議是使用事件mousedown而不是click並檢查點擊是否發生在日志包裝中這樣 

$(e.target).parents().has($('#log_in_container')).length

准備好的整個文件看起來像這樣 

$(document).on('mousedown', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if($(e.target).parents().has($('#log_in_container')).length)
    {
      $('#log_in_form').fadeOut();
    }
})

解決方案5
 0  2017-12-01 13:19:14

你為什么不使用onSelect的事件datepicker ，並觸發你的點擊bound到document手動，因為它似乎並沒有當你點擊里面的日期被觸發datepicker ，沒有必要改變對任何事件或者在onSelect編寫一個單獨的邏輯，只需在.on('click')添加更多邏輯並觸發它只需添加2行代碼並保持原樣。

您只需要更改datepicker初始化，如下所示 

$("#datepicker").datepicker({
    onSelect: function (date, obj) {
        $(document).trigger('click')
    }
});

請參閱下面的演示 

 $(document).on('click', function(e) { if ($(e.target).closest('#log_in').is('#log_in')) { $('#log_in_form').fadeIn(); } else if (!$(e.target).closest('#log_in_container').is('#log_in_container')) { $('#log_in_form').fadeOut(); } }) 
 #log_in_container { display: inline-block; width: 122px; height: 58px; margin-left: 60px; background-color: gray; } #log_in { display: block; width: 120px; height: 28px; text-align: center; border: 1px solid red; font-size: 16px; background-color: yellow; vertical-align: top; } #log_in_form { display: none; position: absolute; width: 120px; height: 28px; text-align: center; background-color: green; border: 1px solid blue; } .type { display: inline-block; width: 120px; height: 30px; text-align: center; border: 1px solid red; font-size: 16px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("#datepicker").datepicker({ onSelect: function(date, obj) { $(document).trigger('click') } }); }); </script> <title></title> </head> <body> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option> <option value="0">Spiderman</option> <option value="1">Iron man</option> <option value="2">Deadpool</option> </select> <select class="type"> <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option> <option value="0">Kebab</option> <option value="1">Mousaka</option> <option value="2">Noodles</option> </select> <div id="log_in_container"> <div id="log_in">Log_In_button</div> <div id="log_in_form">login_form</div> </div> <div id="datepicker"></div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Event.target替代方案 jQuery-為什么event.target在這種情況下不起作用？ Javascript：單擊后更改按鈕文本。 event.target 不起作用 函數中的 event.target 沒有給出預期的結果 div 擴展動畫 max-height 不起作用。 高度始終為 0 克隆所選 event.target 的父 div 使用event.target檢測內部div的單擊 $(event.target) 沒有檢測到任何內部元素 event.target在手機上的工作方式有所不同嗎？ 事件監聽器不起作用。 它說事件未在控制台中定義
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM