Ngừng tuyên truyền của mousedown/mouseup từ trình xử lý nhấp chuột

Question

Here's a DEMO.

Tôi có hai divs, một bên trong và một bên ngoài:

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

Với một số CSS để bạn có thể xem đó là đó:

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

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

tôi cố gắng ngăn chặn lan truyền của mousedown và mouseup sự kiện từ trong trình xử lý click như vậy:

$('#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'}); 
}); 

Điều này dường như không thể. Những gì hiện công việc đang kêu gọi .stopPropagation từ bên trong mousedown và mouseup cuộc gọi khác, như ở đây (another DEMO):

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

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

Tôi đã có thể đã trả lời câu hỏi của riêng tôi, nhưng tôi không chắc chắn nếu cách tiếp cận của tôi là tốt nhất . hoặc hợp lý nhất đây có phải là cách đúng đắn để ngăn chặn một sự kiện bọt lên đến một mousedown và mouseup

Answer 1

có Kể từ mouseclick và mousedown/mouseup là những sự kiện khác nhau, bạn không thể có được ở một từ khác ở tất cả?. - bạn phải làm điều đó từ bên trong trình xử lý mousedown/mouseup của riêng bạn. làm là refactor thành một phương pháp chung để sử dụng ở cả hai nơi:

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

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