web-dev-qa-db-ja.com

Firefoxの<button>要素内の<span>のクリックイベントがありません

ボタン要素内のスパン要素のクリックイベントでアクションをバインドすると、Firefox 32で問題が発生します。他のブラウザはうまく動作するようです。

ここで jsFiddleの問題を示すコード です。

<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>

誰かがそれがバグか機能かを知っていますか？

javascriptfirefoxbuttononclickdom-events
20
Jrmi

私が知っている限りでは、子要素をクリックすることは、ボタン内にネストされているため機能しません。ボタンは子要素のコンテナではなく、テキストのみのコンテナです。

以下のようにしようとすると、常にボタンをクリックしたことがわかります。

<button type="button" onclick="alert('You clicked the button!');">
   inside a button <span onClick="alert('clicked span');">**Not working**</span>
</button>

だから、私の提案は別のスパンまたはdivを使用することです

<div class="button_replace">
  inside a div <span onClick="alert('clicked span');">**working**</span>
</div>

それが役に立てば幸い...

注：コードはchromeで機能しますが、Firefoxでは機能しません。私の答えは、Firefoxで機能させるための代替ソリューションです

24
SDK

pointer-events プロパティをspan要素に追加します。

button span {
  pointer-events: none;
}
14
marco-s

作業中
ボタンの内側機能しない

ここで実際に実行したいのは、ボタンにクリックイベントを設定することです。ボタンは常にボタンです。これは、ネイティブHTML要素であり、すべてのユーザーに対して組み込みのアクセシビリティがあるためです。

ボタンがクリックされる理由しないスパンに包まれた何かをクリックした場合（またはまたはetc）の中ボタンは、event.currentTargetではなくevent.target（実際に何がクリックされたか）のクリックをリッスンしているためです。

ボタンのクリック自体（スパンを含むボタン内の任意の場所のクリック）を聞く場合は、次のようにします：

HTML：

<button type="button" class="jsAlertOnClick">
  Inside a button 
  <span onClick="alert('Span Clicked, and...');">I'm in a span</span>
</button>

JavaScript：

const myButton = document.querySelector('.jsAlertOnClick');

function handleBtnClick(event) {
  const btn = event.currentTarget;
  window.alert(btn + 'has been clicked!');
}

myButton.addEventListener('click', handleBtnClick);

スパンをクリックすると、最初にアラートが発生し、次にボタン1が発生します。ボタンの別の場所をクリックすると、そのアラートのみが発生します。

0
Grace Snow