當綁定到鼠標時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(); 
}); 

Fixed Fiddle（也解除了移動的東西，這樣我就可以正常觀看）