

次のようなマークアップの場合、Firefox39ではimgタグに仕掛けられたonmouseoverイベントが発火しません。

[code]

    <button class="btn" type="submit" name="test" value="購入ボタン">
      <img src="images/test.png" alt="テスト" onmouseover="alert(1)">
    </button>
    
[/code]

Chrome43ではイベントが発火しアラートダイアログが表示されます。  
Firefoxでもイベントが発火するようにするにはどうすればよいでしょうか？  
よろしくお願いいたします。


CC BY-SA 3.0
2015-07-24T07:47:13.420
12642
2019-12-13T18:09:54.740
10661
question
html firefox
firefoxでbuttonタグの子要素のimgタグのoumouseoverイベントが発火しない


最も単純には、button の方に onmouseover を貼ると良いと思います。

[code]

    <p>
      button > img に mouseover
      <button class="btn" type="submit" name="test" value="購入ボタン">
        <img src="images/test.png" alt="テスト" onmouseover="alert(1)">
      </button>
    </p>
    
    <p>
      button に mouseover
      <button class="btn" type="submit" name="test" value="購入ボタン" onmouseover="alert(1)">
        <img src="images/test.png" alt="テスト">
      </button>
    </p>
    
    <p>
      img に mouseover
      <img src="images/test.png" alt="テスト" onmouseover="alert(1)">
    </p>
    
[/code]

[code]

    <p>
      button > img に mouseover
      <button class="btn" type="submit" name="test" value="購入ボタン">
        <img src="images/test.png" alt="テスト" onmouseover="alert(1)">
      </button>
    </p>
    
    <p>
      button に mouseover
      <button class="btn" type="submit" name="test" value="購入ボタン" onmouseover="alert(1)">
        <img src="images/test.png" alt="テスト">
      </button>
    </p>
    
    <p>
      img に mouseover
      <img src="images/test.png" alt="テスト" onmouseover="alert(1)">
    </p>
[/code]

Firefox は button 要素でのイベントの処理が特殊なようですね。

[jQuery event bubbling on button not working as expected in Firefox - Stack
Overflow](https://stackoverflow.com/questions/8187854/jquery-event-bubbling-
on-button-not-working-as-expected-in-firefox)

次点として、button を div に変更し、submit を自前で実装するなどがあると思います。


CC BY-SA 4.0
2015-07-24T12:49:30.740
12657
2019-12-13T18:09:54.740
2019-12-13T18:09:54.740
32986
7471
12642
answer