原以為span不同於input,事件冒泡會被父級標籤吞噬,寫了個測試事件冒泡的Demo,發現並不是想得那樣。另外:event.stopPropagation()以及event.stopImmediatePropagation()並不能阻止span冒泡到a標籤中,而簡單粗暴的return false卻可以。
<!DOCTYPE html> <html> <head> <title>Bubbling</title> <style type="text/css"> * { font-size:30px; } div { border: 1px blue solid; } span { border: 1px blue solid; } </style> <script type="text/javascript"> function setforeColor(sender) { sender.style.color = "red"; } function setbgColor(sender) { sender.style.background = "green"; return false; } </script> </head> <body> <div> <span onclick="setforeColor(this)">span tag</span> in div </div> <br> <div> <input type="button" value="Button" onclick="setforeColor(this)"/> in div </div> <br> <a href="https://www.baidu.com" style="text-decoration:none;display:block;"> <span onclick="setforeColor(this);return false">span tag</span> in anchor </a> <br> <a href="https://www.baidu.com" style="text-decoration:none;display:block;"> <span onclick="setbgColor(this)">span tag</span> in anchor </a> </body> </html>
以上是如何實現Html事件冒泡的詳細內容。更多資訊請關注PHP中文網其他相關文章!