Question

我使用bootstrap创建带有glyphicons的圆形按钮，我想改变按钮的颜色，包括glyphicon颜色。但是当我点击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');
}

我的引导按钮

<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

只需在你的glyphicon中添加“pointer-events：none”：

<span class="glyphicon glyphicon-search" style="margin: 0 0px;pointer-events:none"></span>

Answer 2

它确实有效，但Event.target是触发/调度事件的元素，而不是您将侦听器附加到的元素。

您正在寻找Event.currentTarget：

在事件遍历DOM时标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

所以将代码更改为：

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');
}

Answer 3

这样可以解决问题：

function setColor(e) {
    var target = e.target, status;

    if(target.tagName == 'BUTTON') {
      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');
    } else {
      status = e.target.parentElement.classList.contains('btn-success');
      e.target.parentElement.classList.add(status ? 'btn-default' : 'btn-success');
      e.target.parentElement.classList.remove(status ? 'btn-success' : 'btn-default');
    }
}

Answer 4

使用JQuery

<script>  
function setColor(e) {
    var target = e.target,
        status = $(e.target).hasClass('btn-success');

   $(e.target).addClass(status ? 'btn-default' : 'btn-success');
    $(e.target).addClass(status ? 'btn-success' : 'btn-default');
}
</script>

还要记住，一旦分配了类，运行时就会在该元素上存在类。我认为删除一个类是可以添加的。

其他选项是将按钮本身添加为参数

<button onclick="setColor(this)" type="button" style="width: 50px; height: 50px; margin: 10px; padding: 10px 16px;  font-size: 18px; line-height: 1.33; border-radius: 25px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>

<script>


function setColor(btn) {
    var status = $(btn).hasClass('btn-success');

   $(btn).addClass(status ? 'btn-default' : 'btn-success');
    $(btn).addClass(status ? 'btn-success' : 'btn-default');
}
</script>

要完成，我相信你想要这个吗？

<button onclick="setColor(this)" type="button" style="width: 50px; height: 50px; margin: 10px; padding: 10px 16px;  font-size: 18px; line-height: 1.33; border-radius: 25px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);" class="btn btn-circle btn-lg"><span class="glyphicon glyphicon-search" style="margin: 0 0px;"></span></button>

<script>


    function setColor(btn) {      
       $(btn).toggleClass('btn-success');
    }
    </script>

onclick事件仅适用于按钮，而不适用于按钮

4 个答案: