span 內部按鈕，在 Firefox 中不可點擊

Question

我的代碼

---

HTML：

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS：

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS：

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png"); 
    background-repeat: no-repeat;
}

演示

問題

---

我可以在 Chrome 中點擊.icon ，但不能在 Firefox 中點擊。 當我點擊.icon ，它點擊整個button 。

問題：

---

我的代碼無效嗎？ 如果我的代碼有效，那么這個問題的解決方案是什么。

我試過的

---

1. 我曾嘗試從控制台執行$('.icon').click()並且它在 ff 中完美運行，所以我想問題是span在button內不可點擊。

2. e.preventDefault()和e.stopPropagation也不起作用。

3. 我試過把  在span但它也不起作用。

Answer 1

參考規范，最值得注意的是禁止的內容（在 SGML 定義中；為了幫助閱讀，請看這里）： a s、 form s、表單“控件”（ input 、 select等）和fieldset s。

雖然您斷言span s（和div s 等）是button元素的合法內容是正確的，但非法元素都與具有除布局/樣式之外的任何其他功能的按鈕內容有關。

我在規范中沒有看到任何妨礙您嘗試做的事情，但我確實看到了很多令人沮喪的事情，如果各種瀏覽器也因不支持它而“勸阻”這一點，我也不會感到驚訝。

也就是說：如果您想獲得跨瀏覽器支持，請找到另一種方式來做您想做的事。 我不明白你實際上想要做什么，所以我認為不可能提出替代方案。 我知道你想要對點擊按鈕和圖標做出不同的反應——但這是你不想發生的事情的（好的，順便說一句）演示，而不是對你想要解決的實際問題的解釋。

一種方法可能是不使用按鈕，而是使用另一個span或div ：

<p id="console"></p>
<div class="button_replace">Click <span class="icon"></span></div>
<script>
  $('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
  });
  $('.button_replace').click(function () {
    $('#console').html('Button has been clicked');
  });
</script>

Answer 2

如果你在這里，也許這個解決方案對你有用，即使它與問題沒有直接關系。

如果你已經申請了

• $("button").click()監聽器，以及
• 您的按鈕包含<span>或任何其他<tag> ，並且
• 你的.click回調函數指的是$(this) （甚至this ）

然后，如果您點擊該按鈕， this可能是您點擊的最上面的標簽。

這通常會（例如在我的情況下）錯誤地歸因於調用者，從而導致腳本錯誤。

希望它可以幫助那里的人！

Answer 3

使用以前的答案，我發現只需更改我的即可解決問題並允許我在按鈕內包含內容。 樣式幾乎相同，我只是在那里留下了相同的引導按鈕類和元素，它的行為與以前一樣。 tabindex 在那里是因為我在按鈕內使用了一個下拉列表，以便按鈕（現在是 div）可以聚焦並在 Angular 中具有 (blur) 或 (focusout) 事件。