<的缺少单击事件;span>内部<按钮>元素

Missing click event for <span> inside <button> element on firefox

本文关键字：gt lt 内部 元素 span 按钮 单击 事件      更新时间：2023-09-26

当我在按钮元素内绑定span元素的点击事件时，我遇到了Firefox 32的问题。其他浏览器似乎运行良好。

这里的代码说明了jsFiddle上的问题。

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

有人知道为什么，如果这是一个bug或功能吗？

您必须将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元素，并且内置了所有人的可访问性。

如果您点击按钮内部包裹在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的原因，您可能可以完全去掉它。我只是在处理一个类似的问题，我们在按钮内有一个跨度，但这个跨度被用来容纳一个glpyicon:

    <button class="btn btn-default pull-right" type="button">
              <span class="glyphicon glyphicon-refresh"></span>
    </button>

我终于发现有一种更简单、更干净的方法——至少在这种情况下是这样。只需将字形类的东西放在按钮类中即可：

    <button class="btn btn-default pull-right glyphicon glyphicon-refresh" type="button">
    </button>
相关文章：