jQuery 操作在绑定到鼠标时有效，但在绑定到单击时无效

Question

我是一个超级长的读者，但在这里发表了很少的评论。每次我遇到问题时，我都能在实际问任何事情之前搜索答案。我尽量不偷懒。

无论如何，我最近一直在自学更多的jQuery，我遇到了一个我无法搜索的问题。需要比我受过更多教育的眼睛。请注意，这还不完全兼容互联网爆炸器(另一个线程的对话(

在这个小提琴中：http://jsfiddle.net/29Aat/65/

我把鼠标滚动绑定到从底部开始的窗帘上的上下效果。它对于我的目的来说足够好用。向下滚动，主要内容显示。向上滚动，欢迎屏幕显示。

旁白：不要尝试以移动分辨率打开它......我还没有完成设置。可以说，不会有一堆层飞来飞去。

所以我有两个主要功能来升高和降低百叶窗。

showit() hideit()

// Function to show #main-content in standard resolution
function showit() {
    if ($('#main-content').hasClass('hideit')) {
        $('#main-content').removeClass('hideit').addClass('showit');
        $('#wrap').removeClass('cursor');
        $('#main-content').stop().animate({
            height: '+=' + realheight,
            opacity: 0.7
        });
        $('#welcome').stop().animate({
            opacity: 0,
            top: '-=10'
        }, 600).delay(400).animate({
            top: midpoint
        }, 100);
    }
}
// Function to hide #main-content in standard resolution
function hideit() {
    if ($('#main-content').hasClass('showit')) {
        $('#main-content').removeClass('showit').addClass('hideit');
        $('#wrap').addClass('cursor');
        $('#main-content').stop().animate({
            height: '-=' + realheight,
            opacity: 0
        });
        $('#welcome').stop().animate({
            opacity: 1,
            top: '+=10'
        }, 600);
    }
}

当鼠标滚动调用hideit()窗帘完美落下时。

当我单击红色 X 调用hideit()时 - 主内容幕的右上角 - 它无法正确执行。窗帘没有落下，而是再次升起。

希望这里有人可以帮助解释这一点。我已尽头。

Answer 1

你的问题是传播。.closeit按钮位于#wrap 内。这意味着当你点击红色的 X 时，hideit函数将正常运行，但点击事件会传播并最终到达#wrap，也会处理它，运行showit - 导致你看到的奇怪效果。

您需要在关闭按钮的事件处理程序中使用 event.stopPropagation() 方法停止传播，如下所示：

// Activate the close button
$(".closeit").click(function (e) {
    hideit();
    e.stopPropagation();
});

修复了小提琴(也解除了移动内容，所以我可以正确查看它(