跨越内部按钮,在ff中无法单击

Question

我的CODE

---

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;
}

演示

问题

---

我能够点击.icon铬,但不能点击ff.当我点击.icon它时,它会点击整个button.

题:

---

我的代码不对吗？如果我的代码有效,那么解决这个问题的方法是什么.

我试过了什么

---

1. 我试过$('.icon').click()从控制台做,它在ff中工作得很好,所以我猜问题是span内部无法点击button.

2. e.preventDefault()并且e.stopPropagation也没有工作.

3. 我试过把它 放进去,span但它也没用.

Answer 1

请参考规范,最引人注目的是禁止的内容(在SGML定义;援助读取,看这里):aS,formS,形成"控制"( ,input,select等),和fieldset秒.

虽然你断言spans(和divs等)是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>