在頁面的任何部分點擊鼠標時隱藏div，除了div

目前，我有一個名爲'Comment'的按鈕，當點擊時它會彈出一個評論框。我希望評論框隱藏，只要用戶點擊評論框本身以外的任何頁面區域。在頁面的任何部分點擊鼠標時隱藏div，除了div

目前，使用我的代碼時，按鈕在點擊時會消失。任何人都可以將我指向正確的方向嗎？謝謝！

Ruby的ERB：

<% @entry.each do |e| %> 
<div class="entry"> 
<p><%= e.entry %></p> 
<small>Posted by <%= e.author %> at <%= e.created_at.strftime("%I:%M%p %m/%d/%Y") %></small> 
<% if e.comments.nil? %> 
    <p>No Comments</p> 
<% else %> 
    <% e.comments.each do |c| %> 
    <div class="comment"> 
    <blockquote><strong><%= c.author %></strong> writes:<%= c.comment %></blockquote> 
    </div> 
    <% end %> 
<% end %> 
<div class="comments"> 
<a href="#" data-comment="<%= e.id %>" class="newcommentbutton">Comment</a> 
<div class="newcomment" id="comment<%= e.id %>"> 
<%= form_for @comment, :url => entry_comments_path(e, @comment) do |f| %> 
<ol> 
<li><%= f.label :author %> 
<%= f.text_field :author %></li> 
<li><%= f.label :comment %> 
<%= f.text_area :comment %></li> 
<%= f.submit %> 
</ol> 
<% end %> 
</div> 
</div> 
    </div> 
<hr /> 
<% end %> 
<%= button_to "Write A Message", new_entry_path, :method => :get %>

的Javascript：

// Place your application-specific JavaScript functions and classes here 
// This file is automatically included by javascript_include_tag :defaults 
$(document).ready(function() 
{ 
$('.newcommentbutton').click(function() 
{ 
    var button = $(this); 
    var comment = button.attr('data-comment'); 
    button.hide(); 
    $('#comment' + comment).slideDown('fast', function() { 
     $('#comment' + comment + ' input[type=text]').focus(); 
    }); 

}); 
$('.newcomment').click(function(event) 
{ 
    event.stopPropagation(); 
}); 
$('body').click(function() 
{ 
    $('.newcomment').hide(); 
}); 


});

來源

2010-11-04 Nick Barrett

你的新註釋按鈕也需要stop propagation，像這樣：

$('.newcommentbutton').click(function(e) { 
    var button = $(this); 
    var comment = button.attr('data-comment'); 
    button.hide(); 
    $('#comment' + comment).slideDown('fast', function() { 
     $('#comment' + comment + ' input[type=text]').focus(); 
    }); 
    e.stopPropagation(); 
});

你有正確的想法，請記住.newcommentbutton是也在<body>所以它打開評論表單，然後點擊泡沫並關閉它。

來源

2010-11-04 09:17:24

你比我快;-)類型確定，但我至少可以給一個建議提問者：在這種情況下嘗試調試該事件被稱爲什麼順序。放置一些「警報」或「window.dump」消息，並且與此類似的錯誤可能會變得明顯。 – Arsen7 2010-11-04 09:21:41

@ Arsen7 - 'console.log（）':) – 2010-11-04 09:22:15

感謝堆。我對事件傳播的想法相當陌生，但我明白爲什麼我需要在兩者上停止它。乾杯! – 2010-11-04 09:36:42

如果你有這樣的一個div：

<div id="comment"...>

你可以把重點放在它，當你告訴它：

document.getElementById('comment').focus();

你需要一個tabindex屬性設爲您的DIV到讓焦點工作：

<div id="comment" tabindex="99"...>

然後你設置一個onblur，它會消失R，當用戶點擊網頁的任意位置上：

document.getElementById('comment').onblur = function(){ 
    this.parentNode.removeChild(this); 
};

來源

2010-11-04 09:22:45 Mic

在頁面的任何部分點擊鼠標時隱藏div，除了div

回答

相關問題