javascript - onclick 事件仅适用于按钮，不适用于与按钮一起使用的字形

Question

我已经使用 bootstrap 创建了带有字形图标的圆形按钮，我想更改按钮的颜色，包括字形图标颜色。但是当我点击 glyphicon 时，onlclick 事件仅适用于 glyphicon 而不是按钮。 http://embed.plnkr.co/E1dUnkW1tmOCWqYkRaG5/

function setColor(e) {
    var target = e.target,
        status = e.target.classList.contains('btn-success');

    e.target.classList.add(status ? 'btn-default' : 'btn-success');
    e.target.classList.remove(status ? 'btn-success' : 'btn-default');
}

我的 Bootstrap 按钮

<button onclick="setColor(event)" type="button" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>

Answer 1

很好用，但是 Event.target是触发/调度事件的元素，而不是您将监听器附加到的元素。

您正在寻找Event.currentTarget :

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

因此将您的代码更改为:

function setColor(e) {
  var currentTarget = e.currentTarget,
      status = e.currentTarget.classList.contains('btn-success');

  e.currentTarget.classList.add(status ? 'btn-default' : 'btn-success');
  e.currentTarget.classList.remove(status ? 'btn-success' : 'btn-default');
}