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

event.target 弄乱按钮区域

event.target messing up button area

javascript

jquery

events

button

meteor