Question

我有一个带有跨度的按钮来显示fa图标：

<button class="menu" onclick="showMenu()">
  <span class="fa fa-bars fa-1x"></span>
</button>

当我点击按钮时，javascript函数'showMenu'被执行。但是，当我单击fa图标（按钮内）时，该功能不会被执行。从外观和感觉来看，fa图标确实是/应该是按钮的一部分。

看来，只有fa图标周围按钮的填充区域而不是fa图标本身对点击敏感并执行javascript功能。

如何在HTML中添加一个带有fa图标的按钮，我可以在按钮内的任何位置点击该按钮并执行该功能？

Answer 1

在button上设置span事件将允许事件冒泡并在子元素实际触发时被按钮捕获。

但是，当然，如果内联元素（如document.querySelector("button").addEventListener("click", function(evt){ console.log("clicked on " + evt.target); });元素）为空，则它在屏幕上不占用空间，因此，如果事件附加到它，则无法触发。

＆＃13;

button { width:100px; height:50px; }

＆＃13;

<button class="menu">
  <span class="fa fa-bars fa-1x">X</span>
</button>

＆＃13;

import requests, re
from bs4 import BeautifulSoup
page = requests.get('https://www.x-rates.com/calculator/?from=GBP&to=USD&amount=1')
soup = BeautifulSoup(page.text, 'html.parser')
price_box = soup.find('span',{'class':'ccOutputRslt'})
rate = price_box.text.replace("USD", ' ')

def gbp_to_usd(rate,gbp):
    dollars=gbp*rate
    return dollars


gbp = input("Enter GBP amount: ")
finalamt = gbp_to_usd(float(rate),float(gbp))
print(str(gbp)+" GBP is equvalent to "+"$"+str(finalamt)+" USD")

＆＃13;

按钮内的跨度不可点击

1 个答案: