Javascript onclick事件仅适用于按钮，不适用于与按钮一起使用的glyphicon

我已经使用引导创建了带有glyphicon的圆形按钮，我想更改按钮的颜色，包括glyphicon颜色。但当我单击glyphicon时，onClick事件仅适用于glyphicon，而不适用于按钮。

我的引导按钮

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

只需将“指针事件：无”添加到您的图标：

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

---

这将实现以下目的：

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

它可以工作，但它是触发/调度事件的元素，而不是您将侦听器附加到的元素

您正在寻找：

当事件遍历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');
}

使用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>

函数setColor（e）{
var目标=e.target，
status=$（e.target）.hasClass（'btn-success'）；
$（e.target）.addClass（状态为“btn默认值”：“btn成功”）；
$（e.target）.addClass（状态为“btn成功”：“btn默认值”）；
}

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

另一个选项是添加按钮本身作为参数

<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>

功能设置颜色（btn）{
var status=$（btn）.hasClass（'btn-success'）；
$（btn）.addClass（状态为“btn默认值”：“btn成功”）；
$（btn）.addClass（状态为“btn成功”：“btn默认值”）；
}

为了完整，我相信你想要这个

<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>

函数setColor（btn）{
$（btn.toggleClass（'btn-success'）；
}

请提供jsfiddle.plnkr以返回预期结果？以下内容的可能重复项是更新的。只有在保证它是

parentElement

的情况下，这才有效，但如果OP决定在

btn

中添加另一个包装，则脚本将再次失败。如果点击直接发生在btn上的标志符号之外，它也会失败。是的，这是真的，但是根据OP提供的HTML，我已经添加了我的答案！是的，但是现在点击按钮本身会失败（如果你没有直接点击图标，而是点击按钮所在的区域，而不是图标），我在监听文档上的某些点击事件时正在使用e.target。chrome和IE的反应不同，如果鼠标单击glyphicon而不是按住glyphicon的按钮，chrome会选择glyphicon作为元素。这解决了我的问题-谢谢！

<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>