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属性的东西）。这样，无论你是否点击图标，你仍然点击实际的按钮。