如果父元素具有preventDefault，如何將點擊傳播給子元素？

Question

UPDATE： 這並不在Firefox的最新版本的工作（15.0.1）： http://jsfiddle.net/DerNalia/NdrNV/5/

點擊複選框導航到谷歌...但它不應該:(

看來，加入e.stopPropagation（）不利於/不工作

---

playarea：http://jsfiddle.net/DerNalia/NdrNV/1/

我想要做的事情： 當我點擊錨點旁邊的複選框（但實際上是錨點的一個子元素）時，它應該改變狀態，並且改變「其他」複選框的狀態。

但由於錨點調用了e.preventDefault（），所以該複選框不會被檢查。

這裏是我的標記

<a href="#">Link Name <input class="home" type="checkbox"/></a> 
<br /> 
Sync'd checkbox: <input class="other" type="checkbox" />​ 

下面是一些陷入困境的jQuery

$(function() { 
    $("input.home").click(function() { 
     $("input.other").click(); 
    }); 

    $("a").click(function(e) { 
     e.preventDefault(); 
     // prevent default so we can do some ajaxy things instead of follow the href 
    }); 
})​ 

所以，我該如何改變錨標記jQuery的點擊動作，使得點擊傳播到子元素（但是我仍然可以在沒有瀏覽器跟蹤錨標籤的href的情況下執行一些AJAX事情）？

有沒有辦法做到這一點，而不改變標記？ （現在的方式，使語義意義我的web應用程序）

Answer 1

它不起作用，因爲event.preventDefault將取消該事件。

使用e.preventDefault上點擊checkbox這是包裝<a>不會讓你改變複選框的狀態。

我能想到的解決方法是在不同的上下文中設置複選框狀態，以便e.preventDefault代碼無效。

DEMO：http://jsfiddle.net/NdrNV/10/

$(function() { 
    $("input.home").click(function() { 
     $("input.other").click(); 
    }); 

    $("a").click(function(e) { 
     e.preventDefault(); 

     var setCheckbox = function() { 
      var checkbox = $(e.target)[0]; 
      checkbox.checked = checkbox.checked?false:true; 
     } 

     if ($(e.target).is(':checkbox')) { 
      setTimeout(setCheckbox, 0); 
     } 

    }); 
}) 

注：這是一種解決方法。

Answer 2

$(function() { 
     $("input.home").click(function() { 
      if($(this).attr('checked') == 'checked') 
       $(this).removeAttr('checked'); 
      else        
       $(this).attr('checked', 'checked'); 
      $("input.other").click(); 
     }); 

    $("a").click(function(e) { 
     e.preventDefault(); 
     // prevent default so we can do some ajaxy things instead of follow the href 

     var target = e.target; // object that triggers the event 
     $(target).children().trigger('click'); 
    }); 
}); 

Answer 3

你可以把條件e.target.tagName這樣，

if(e.target.tagName == 'A')   
     e.preventDefault();  

Live Demo

$(function() { 
    $("input.home").click(function() { 
     $("input.other").click(); 
    }); 

    $("a").click(function(e) { 
     if(e.target.tagName == 'A')   
      e.preventDefault();  


     // prevent default so we can do some ajaxy things instead of follow the href 
    }); 
})​