event.target搞亂按鈕區域

Question

我正在使用以下代碼來觸發事件。

'click .btn-zoom':function(e){ 
    e.preventDefault; 
    var zoomFont = parseInt($('pre code').css('font-size')) + 2; 
    if(zoomFont <= 25) { 
     $(e.target).parent('code').css('font-size', zoomFont); 
//  $('pre code').css('font-size', zoomFont); //Alternative code 
    } 
}, 

<button class="btn-zoom"><i class="plus icon"></button>是按鈕標記。

有趣的是，當我使用上的代碼$(e.target)....，按鈕只會當我點擊按鈕排除的圖標本身的界限激活。簡化，如果我完全在圖標的邊界內點擊，它將不會被激活。

如果我使用上面提到的替代代碼，只要在按鈕內點擊，就會觸發。

有沒有辦法解決這個問題？我需要使用e.target，因爲我打算在模板中使用多個code。

Answer 1

如果您單擊該圖標，您e.target是：

<i class="plus icon">

如果單擊該按鈕，您e.target是：

<button class="btn-zoom">

由於您使用$(e.target).parent，它是隻有在您點擊按鈕時纔有效，因爲我假定按鈕的父項爲pre code，而圖標的父項實際爲<button class="btn-zoom">。

您的替代代碼工作原因是因爲您直接訪問pre code而不依賴parent行爲。

解決它的一個好方法可能是修改您的css的btn-zoom以包含圖標（使用類似background屬性的東西）。這樣，無論你是否點擊圖標，你仍然點擊實際的按鈕。