選擇div但在div內沒有輸入jQuery的

Question

我試圖選擇一個點擊事件的div但不是所述div內的輸入。我認爲這樣做，但它不起作用。這裏是一個demo。謝謝

HTML

<div id = "test"><input></div> 

JS

$('#test:not(input)').click(function(){ 
    alert(); 
}); 

Answer 1

你可以檢查，看看是否點擊的元素是使用input元素!$(e.target).is('input')

Updated Example

$('#test').on('click', function (e) { 
    var $target = $(e.target); 

    if (!$target.is('input')) { 
     alert('clicked'); 
    } 
}); 

Answer 2

當你點擊輸入，點擊事件冒泡到它上面的div。

您可以通過在事件對象上調用stopPropagation或stopImmediatePropagation來停止此操作。

http://jsfiddle.net/t66f06oL/1/

$('#test').on('click', function() { 
    alert(); 
}); 

$('#test').on('click', 'input', function(e) { 
    e.stopImmediatePropagation(); 
}); 

Answer 3

當你點擊input控制你的click事件實際上是由父DIV抓獲。你可以通過改變你的代碼來解決這個問題：

$('#test:not(input)').click(function(){ 
    alert(); 
}); 

$('#test').find('input').click(function(e){ 
    e.stopPropagation(); 
});