当我在按钮元素内的 span 元素的点击事件上绑定动作时，我遇到了 Firefox 32 的问题。其他浏览器似乎运行良好。
<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>有谁知道为什么以及它是错误还是功能？
Firefox 上 <button> 元素内的 <span> 缺少点击事件
IT技术
javascript
firefox
button
onclick
dom-events
2021-03-03 20:29:58
4个回答
您必须将该pointer-events属性添加到span元素。
button span {
pointer-events: none;
}
据我所知，单击子元素不起作用，因为它嵌套在按钮内。按钮不是子元素的容器 - 仅用于文本。
如果你像下面这样尝试，它总是告诉你你点击了按钮。
<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 中工作的替代解决方案
在 css 中为您的按钮添加一个指针事件，例如：
button span {
pointer-events: none;
}单击按钮元素将被忽略
在按钮内工作不工作
您真正想要在这里做的是在按钮上有一个单击事件 - 始终是按钮，因为它是本机 HTML 元素并且为所有人内置了可访问性。
您按一下按钮之所以不会，如果你点击的东西包裹在一个跨度（或火灾或内部等）的一个按钮，是因为你在听上event.target点击（什么实际点击），而不是event.currentTarget。
如果你想听按钮点击本身（点击按钮内的任何地方，包括跨度），你可以使用这样的东西：
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);
如果您单击跨度，该警报将首先触发，然后是按钮一。如果您单击按钮中的其他位置，则只会触发该警报。