php / javascript按钮在firefox中不起作用

Question

首先，我在php / html中创建按钮

<button class="accordionLic" id="<?php echo 'accordionClass'.$lic_num?>">#<?php echo $lic_num; ?></button>

我们可以称之为“大按钮”

文档准备就绪后，脚本启动，正在为此按钮（大按钮）创建内容+在其中创建另一个按钮（我们可以将其称为“小按钮”）

//...code...//
var text = (elem.innerHTML = accordionHeader[i] + 
'<span style="float:right;font-weight:bold;"><a href="?edit='+id[i]+'">
 <button class="btn btn-default">edit</button></a> '+(i+1)+'</span>') || "";

在输出中，这类似于：

<button class="big-button">
  <b>header</b>content

    <span style="float:right">
      <a href="?edit=5"> 
        <button id="small-button">edit</button>
      </a>
    </span>

</button>

问题是（在Firefox中）我无法单击small-button -“单击”始终在这个大small-button上。 就像big-button在small-button前面一样。 我尝试了z-index但是它根本没有帮助。 在Chrome中，不会发生此问题。

Answer 1

那是因为它是无效的：不允许在按钮内嵌套交互式内容（例如按钮）。 这意味着您的大按钮一定不能是按钮元素。

尝试将大按钮设置为带有display的span元素/ div元素：inline-block; 模拟类似的效果。 当然，您可能还想添加一些自定义逻辑，以使其感觉像一个按钮（悬停/焦点/ tabindex等），但这取决于您的需求。

另请参见此答案以获取概述，哪些内容不允许嵌套在按钮内： 我可以将按钮嵌套在另一个按钮内吗？