javascript - 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 中)我无法点击小按钮 - “点击”总是在这个大按钮上。就像大按钮位于小按钮前面。我尝试了 z-index 但它根本没有帮助。在 Chrome 中不会出现此问题。

Answer 1

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

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

另请参阅此答案以了解不允许在按钮中嵌套的内容的概述:Can I nest button inside another button?