javascript - 单击按钮时如何防止按钮内部跨度标签不可点击或无响应？

Question

我创建的按钮有问题，基本上当我单击按钮时，它似乎非常无响应，只有大约 50% 的时间会触发。目前我在按钮内有一个 span 标签，我认为这可能对按钮点击有影响。这是对的吗？如果是这样，防止点击跨度的最佳方法是什么？

按钮标记：

<button class="btn view-newest btn-inverse is-active">
 <i class="icon icon-star"></i>
 <span>Click the button</span>
</button>

然后我有一个简单的 .on 点击​​事件？

Answer 1

如果这是您拥有的所有代码，则该<span>标签不应干扰 jQuery click 事件侦听器；它没有做任何花哨的事情。

这是一个展示这一点的JSFiddle：

<button class="btn view-newest btn-inverse is-active">
 <i class="fa fa-star"></i>
 <span>Click the button</span>
</button>

<div id="timesClicked">Times clicked: </div>

<script>
    clicked = 0;
    $(".btn").on('click', function() {
        clicked++;
        $("#timesClicked").text("Times clicked: " + clicked)
   });
</script>

我会检查控制台是否有错误，确保只有一个事件侦听器并且在正确的位置调用它，并检查是否有任何松散的 Javascript 或 CSS 规则影响按钮。