onclick事件工作仅适用于按钮，不适用于按钮使用的图形

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

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>

来源

2015-11-10 ch3t

请提供jsfiddle。 – Alex

http://embed.plnkr.co/E1dUnkW1tmOCWqYkRaG5/preview – ch3t

plnkr似乎返回预期结果？ – guest271314

那么它的工作原理，但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'); 
}

来源

2015-11-10 07:27:57

是的，它的工作原理。非常感谢。 – ch3t

只需添加 “指针事件：无” 你glyphicon：

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

来源

2015-11-10 07:25:33

这将这样的伎俩：

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

来源

2015-11-10 07:27:30 deepakb

这只会工作。如果点击直接在btn上的字形之外发生，它也会失败。 –

是的，这是真的，但根据HTML提供的'由OP我已经加入我的答案！ – deepakb

是的，但现在它现在将失败点击按钮本身（如果你不直接点击字形，但在按钮区域，但不是字形） –

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

来源

2015-11-10 07:28:00 YANTHO

onclick事件工作仅适用于按钮，不适用于按钮使用的图形

回答

相关问题