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事件工作僅適用於按鈕，不適用於按鈕使用的圖形

回答

相關問題