有包 icon 的 button ,檢擊到icon 無法觸發 click

  • 459
  • 0

button,icon,click

今天在套前端版面的時候發現了一個神奇的事情,在按鈕有包icon 情況下,在點擊此按鈕的時候,

如果滑鼠移標剛好在此ICON 圖示上面會沒辦法觸發 click事件

這時候可以針對修改此ICON 的CSS 加上 pointer-events:none;  即可解決此問題

HTML:

<button type='button'class='btn'><span class="fa fa-close"></span></button>

JS: click 事件註冊

$(".btn").on("click",function(){
    alert("123");
});

CSS:

.fa-close{
    pointer-events:none;
}