jQuery .on（）tr在tr上使用.not（）單擊事件複選框單擊？

Question

所以我的標題可能會令人困惑，但它有正確的細節。我有一個可點擊行的表格。點擊該行時，該行突出顯示。該表還有一個複選框列。 單擊該複選框不應突出顯示或刪除該行中的高亮顯示。如何正確使用.not（）或：不在.on（'click'，'tr'，function（）{...}）？ http://jsfiddle.net/vmu0p2oe/

$('table').on('click', 'tr', function() { 
       if ($(this).hasClass('selected')) { 
        $(this).removeClass('selected'); 
        //$(this).find(":checkbox").prop("checked", false); 
       } 
       else { 
        $('tr.selected').removeClass('selected'); 
        $(this).addClass('selected'); 
        //$(this).find(":checkbox").prop("checked", true); 
       } 

      }); 

Answer 1

這個添加到處理程序的開頭：

if($(e.target).is('input[type=checkbox]')) { 
    return; 
} 

這樣就停止了運行，如果點擊的元素是一個複選框的處理程序。

小提琴：http://jsfiddle.net/vmu0p2oe/1/

Answer 2

添加處理程序使用stopPropagation()防止點擊冒泡出到tr複選框：

$('table').on('click', ':checkbox', function(e) { 
    e.stopPropagation(); 
}); 

DEMO

Answer 3

如何：

$('table').on('click', 'tr', function (e) { 
    var el = e.target; 
    if (el.type !== "checkbox"){ 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     //$(this).find(":checkbox").prop("checked", false); 
    } else { 
     $('tr.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
     //$(this).find(":checkbox").prop("checked", true); 
    } 
    } 
}); 

fiddle