选择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();
});