[英]How to prevent the parent div from registering the click when a child class is clicked; event.stopPropagation(); doing funny things
We've got the classic problem with a div's child getting clicked and the parent's click event gets triggered as well.我们遇到了一个经典问题,即 div 的子级被点击,而父级的点击事件也被触发。 I've got a button set within a container that expands and unexpands upon clicking.我在容器中设置了一个按钮,单击时可以展开和展开。
The button, when clicked, should:单击该按钮时,应:
The two click functions are given below:下面给出了两个点击函数:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+uniqueTitle+']');
$thisNotification.append('<div class="NotificationDescription">'+uniqueDescription+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
$thisNotification.click(function()
{
$(this).animate({height:250}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
What I find with this code is that when clicking the close button:我用这段代码发现的是,当点击关闭按钮时:
The $thisNotification
click is being called (I think).正在调用$thisNotification
点击(我认为)。
Now, when I try to use event.stopPropagation();
现在,当我尝试使用event.stopPropagation();
or a simple return false;
或简单的return false;
in the closeButton's click, I get very interesting results.在 closeButton 的点击中,我得到了非常有趣的结果。
Clicking the close button with either of the above additions now:现在单击带有上述任一添加项的关闭按钮:
Code snippets of the exact way I implemented stopPropogation and return false:我实现 stopPropogation 并返回 false 的确切方式的代码片段:
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
and和
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
return false;
});
You have click bindings for a the parent object:您具有父对象的单击绑定:
$thisNotification
and for a child object:对于子对象:
$(".NotificationCloseButton")
When you click the close button, the 'click' event is being fired for both handlers, all animations are queued, and you get the undesirable closes-then-opens action.当您单击关闭按钮时,两个处理程序都会触发 'click' 事件,所有动画都在排队,并且您会得到不希望的关闭然后打开操作。
You have a few options to resolve this.您有几个选项可以解决此问题。 #1 is to unbind the parent click handler and rebind it after the close button is clicked. #1 是取消绑定父单击处理程序并在单击关闭按钮后重新绑定它。
$thisNotification.click(function()
{
notificationClickHandler(); //animations are separated from bindings
$thisNotification.unbind('click');
});
Alternately, jQuery has a .clearQueue() method that removes all queued animations.或者,jQuery 有一个 .clearQueue() 方法可以删除所有排队的动画。 This might have side-effects when users are quick with the mouse, or if your page is heavy on jQuery animations, so you'll have to experiment with the appropriate level of scope for your application.当用户快速使用鼠标时,或者如果您的页面大量使用 jQuery 动画,这可能会产生副作用,因此您必须为您的应用程序尝试适当的范围级别。
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
$.clearQueue();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.