如何在页面中捕获“正文”和“正文”事件[Jquery].
How to capture 'body' and inside 'body' events in a page[Jquery]
我当前的代码是做什么的:我有这个网页
<li>
<span>Logged in as</span>
<a class="user" href="#"><?php echo $this->loggedas ?></a>
<a id="loginarrow" href="javascript: void(0);"></a>
</li>
这是我上面登录箭头ID的JS
地址 $("#loginarrow").click(function() {
$("#logindrop").toggle("slow");
return false;
});
它工作得很好,但我可以通过再次单击它来关闭它。我不想要,所以我希望如果它打开并且我单击背景,所以它必须关闭。为此我这样做了
$("#loginarrow,body").click(function() {
$("#logindrop").toggle("slow");
return false;
});
现在它的工作很酷,但是遇到了另一个问题。
1 = 我在页面(正文)中有许多其他 html 元素,在这种情况下,每当我单击页面中的其他元素时,还有其他事件要 call.so,因此它会切换我的这个div 登录箭头。
我想要相同的功能,但不是仅在背景上的其他元素上。任何提示
仅在可见时才关闭它。
$("body").click(function() {
if ($("#logindrop").is(":visible"))
$("#logindrop").hide("slow");
});
良好的浏览器性能的基本设计原则是仅在您感兴趣的事件时捕获事件。
因此,将.click()
处理程序放在 #loginarrow
元素上,但在该处理程序中,在body
上注册一个一次性事件处理程序,该处理程序将再次关闭它。 类似的东西(未经测试):
$('#loginarrow').click(function() {
$('#logindrop').show('slow');
$('body').one('click', function() {
$('#logindrop').hide('slow');
});
return false;
});
这将确保您不会不必要地拦截body
上的每次点击,除非您确实需要。
请参阅 http://jsfiddle.net/alnitak/vPHaj/