排除选择通过jquery点击

Question

我试图触发一个动作，当我点击一个父类的tr上的任何地方。不包括当我点击其中一个下拉框时。

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function (e) { 
     if($(e.target).not('select')){ 
      // do something 
    } 

我试着以下，但这是行不通的。

http://jsfiddle.net/0Lh5ozyb/60/

Answer 1

这应该解决的问题是Chrome和火狐浏览器：

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function (e) {     
     if ($(e.target).is('select') || $(e.target).is('option')) { 
      // 
     } else { 
      $(this).css('background-color', 'red'); 
     } 
    }); 

$('tr[class^=child-]').find('td > div, td').hide(); 

JSFiddle test

编辑：如果你不需要做任何简化版点击选择时的动作。

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function (e) {    
     if (!($(e.target).is('select') || $(e.target).is('option'))) { 
      $(this).css('background-color', 'red'); 
     } 
    }); 

$('tr[class^=child-]').find('td > div, td').hide(); 

JSFiddle test

Answer 2

试试这个：

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function (e) { 
     if($(e.target).is("select")) 
     { 
      //... it was a select 
     } 
     else 
     { 
     //... it was not a select 
     } 
    } 

Answer 3

按照jQuery website，你会使用not与之元素子孙附加该事件！ 尝试此

$('tr.parent *').not('select') 
.css("cursor", "pointer") 
.click(function (e) { 
     // do something 
    } 
} 

PS：这可能附着事件不止一次地包含在另一个后裔

Answer 4

jQuery的not一个元件是过滤器的方法。因此，它生成一个jQuery对象。当没有匹配它时，它仍然返回一个空数组，它不是falsy。因此，您的测试始终得到验证。

您可以使用jQuery的测试运算符is来调整您的测试，它会检查您的对象是否与选择器匹配。下面是Royi Namir's answer优化：

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function (e) { 
     if($(e.target).is(":not(select)")) { 
      //... it was not a select 
     } 
    });