Question

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

这里是code illustrating the issue on jsFiddle。

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

有人知道为什么以及是否是错误或功能？

Answer 1

据我所知，点击子元素不会起作用，因为它嵌套在一个按钮内。按钮不是子元素的容器 - 仅用于文本。

如果你尝试如下，它总是告诉你点击了按钮。

＆＃13;

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

＆＃13;

所以，我的建议是使用另一个span或div

＆＃13;

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

＆＃13;

希望它有所帮助...

注意：您的代码将在chrome中运行，但不适用于firefox，我的答案是在firefox中工作的替代解决方案

Answer 2

您必须将suggested in the docs属性添加到 span 元素。

button span {
  pointer-events: none;
}

Answer 3

工作
在按钮内不起作用

您实际上想在此处执行的操作是在按钮上单击事件-始终是按钮，因为这是本机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);

如果单击范围，则将首先触发该警报，然后单击一个按钮。如果您单击按钮中的其他位置，则只会触发该警报。

Answer 4

在css中为你的按钮添加一个指针事件，如：

button span {
    pointer-events: none;
}

按钮元素上的点击将被忽略

在firefox </button> </span>上的<button>元素内缺少<span>的点击事件

4 个答案: