10

私のコード

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

デモ

問題

.iconChrome ではクリックできますが、Firefox ではクリックできません。をクリックすると.icon、全体がクリックされますbutton。

質問：

私のコードは有効ではありませんか? 私のコードが有効な場合、この問題の解決策は何ですか。

私が試したこと

  1. コンソールからやってみましたが、ffで完全に動作するので、内部でクリックできない$('.icon').click()ことが問題だと思います。spanbutton

  2. e.preventDefault()どちらも機能してe.stopPropagationいません。

  3. &nbsp;中に入れてみましspanたが、うまくいきません。

4

3 に答える 3

13

仕様を参照してください。特に禁止されているコンテンツ (SGML 定義内。読み方については、こちらを参照してください): as、forms、フォーム「コントロール」( input、select、など)、およびfieldsets.

spans (およびdivs など) が要素の正当なコンテンツであると主張するのは正しいですがbutton、不正な要素はすべて、レイアウト/スタイリング以外のことを行うボタン コンテンツを持つことに関係しています。

あなたがやろうとしていることを排除する仕様は何も見当たりませんが、それを思いとどまらせる多くのことを見ており、さまざまなブラウザがそれをサポートしないことでそれを「思いとどまらせた」としても驚くことではありません.

つまり、クロスブラウザーのサポートが必要な場合は、別の方法を見つけてください。あなたが実際に何をしようとしているのかわからないので、代替案を提案することはできないと思います. ボタンをクリックするのとアイコンをクリックするのとで異なる反応をしたいということはわかりますが、それはあなたがしたくないことの（良い、ところで）デモンストレーションであり、あなたが解決したい実際の問題の説明ではありません。

1 つの方法は、ボタンを使用せず、代わりに別のボタン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>
于 2013-02-04T16:00:55.707 に答える