我在Firefox 32上遇到了问题,当我将点击事件绑定到按钮元素内部的span元素时。其他浏览器似乎都可以正常工作。
<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>
有人知道这是为什么吗?是一个bug还是一个特性?
我在Firefox 32上遇到了问题,当我将点击事件绑定到按钮元素内部的span元素时。其他浏览器似乎都可以正常工作。
<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>
有人知道这是为什么吗?是一个bug还是一个特性?
pointer-events
属性。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 class="button_replace">
inside a div <span onClick="alert('clicked span');">**working**</span>
</div>
希望这能帮到你...
注意:你的代码可以在Chrome中运行,但无法在Firefox中运行,我的答案提供了在Firefox中运行的其他解决方案。
pointer-events:
button span {
pointer-events: none;
}
在按钮内部工作
不起作用
你真正想要做的是在按钮上添加一个点击事件 - 总是按钮,因为它是原生HTML元素,并具有所有内置的无障碍功能。
如果您在包装在按钮内部的span(或或等)中单击某些内容,则您的按钮单击不会触发,因为您正在监听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);
如果您点击span,那么先触发该警报,然后是按钮警报。如果您在按钮的其他位置单击,则仅触发该警报。
根据您在按钮内使用span的原因,您可能完全可以将其去除。我曾经处理过类似的问题,我们在按钮内使用了一个span,但该span用于容纳图标:
<button class="btn btn-default pull-right" type="button">
<span class="glyphicon glyphicon-refresh"></span>
</button>
我最终发现有一种更简单且更清洁的方法 - 至少在这种情况下是这样的。只需将glyphicon类的内容放在按钮类中:
<button class="btn btn-default pull-right glyphicon glyphicon-refresh" type="button">
</button>