jquery - 如何在某些内部元素上“避免”鼠标按下？

Question

我的代码：

HTML

<div style="position:relative;">
    <div class="boxImmagineResultNext"></div>
    <div class="boxImmagineResult">                
        <textarea cols="15" rows="5"></textarea>
    </div>
</div> 

CSS

.boxImmagineResultNext
{
    height: 235px;
    position: relative;
    width: 200px;
    z-index: 1;
    display:none;    
}

.boxImmagineResult
{
    background-color: #595959;
    height: 255px;
    position: relative;
    width: 220px;
    z-index: 1;
    top:0;
    left:0;
}
​

jQuery

$('.boxImmagineResult').mousedown(function (e) {
    $(this).css({ 'position': 'absolute', 'z-index': '10' });
    $('.boxImmagineResultNext').show();
});


$('.boxImmagineResult').mouseup(function (e) {
    $(this).css({ 'position': 'relative', 'z-index': '5' });
    $('.boxImmagineResultNext').hide();
});​

由于这种机制，我不能在 textarea 上“写”。这仅在 Firefox 上，例如，在 chrome 上也可以。它似乎是“只读的”，但实际上并非如此。

我该如何解决？当我单击文本区域时，我应该“避免”鼠标按下...

Answer 1

使用事件委托可能会有所帮助，因为您将能够测试目标（启动事件的元素）是什么，或者不是您想要的触发器。

$('.boxImmagineResult').on('mousedown', function(e){
    var $target = $(e.target);
    if( $target.is('SELECTOR') ){
        // Do stuff here ...
    }
    return false;
});