停止從點擊處理程序傳播mousedown/mouseup

Question

Here's a DEMO。

我有兩個divs，內部和外部：

<div id="outer"> 
    <div id="inner"></div> 
</div> 

有了一些CSS所以你可以看到它是：

#outer { 
    width: 250px; 
    height: 250px; 
    padding: 50px; 
    background: yellow; 
} 

#inner { 
    width: 250px; 
    height: 250px; 
    background: blue; 
} 

我試圖阻止的mousedown和mouseup事件傳播從click處理器內如下：

$('#inner').on('click', function(e) { 
    e.stopPropagation(); 
    $(this).css({'background': 'green'}); 
    return false; 
}); 

$('#outer').on('mousedown', function(e) { 
    $(this).css({'background': 'green'}); 
}); 

$('#outer').on('mouseup', function(e) { 
    $(this).css({'background': 'yellow'}); 
}); 

這似乎不可能。什麼工作是從其他mousedown和mouseup調用內調用.stopPropagation，如下所示（another DEMO)：

$('#inner').on('mousedown', function(e) { 
    e.stopPropagation(); 
    return false; 
}); 

$('#inner').on('mouseup', function(e) { 
    e.stopPropagation(); 
    return false; 
}); 

我可能已經回答了我自己的問題，但我不知道如果我的做法是最好的或者是最合理的，這是正確的方法來阻止事件冒泡達到mousedown和mouseup？

Answer 1

是的由於mouseclick和mousedown/mouseup是不同的事件，你不能從另一個獲得 - 你必須從你自己的mousedown/mouseup處理程序中完成它。你可以做什麼do是將重構轉換爲在兩個地方使用的通用方法：

stopPropagation('#inner', 'mousedown'); 
stopPropagation('#inner', 'mouseup'); 

function stopPropagation(id, event) { 
    $(id).on(event, function(e) { 
     e.stopPropagation(); 
     return false; 
    }); 
}