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 行为。

修复它的好方法可能是修改 btn-zoom 的 CSS 以包含图标（使用类似 background 属性的东西）。这样，无论您是否点击图标，您仍然会点击实际按钮。