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)....时，按钮只会在我点击按钮 < strong> icon 本身。简化，如果我完全点击图标的边界，它将不会激活。

如果我使用上面提到的替代代码，只要我在按钮内单击，它就会触发。

有没有办法解决这个问题？我需要使用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"> {1}}。

备用代码的工作原因是因为您在不依赖pre code行为的情况下直接访问parent。

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

event.target搞乱按钮区域

1 个答案: