按钮内的 HTML href（如 chrome 标签） 1 个按钮中有 2 个不同的点击功能

Question

我想在按钮内有一个 X，就像 chrome 选项卡中的 X 一样。所以我有 4 个按钮，当我点击其中的一个时，它们会给我一个 POST。现在我想在该按钮内有一个 X 图标以重定向到不同的页面/运行功能

我试图在按钮内放置一个 href ，但它不起作用...... X 会像一个 href 一样呈蓝色，但是当我点击它时，它只会点击按钮。

<button class="btn btn-default" style="background-color: #<?php echo $fontColor; ?>;width:240px;white-space:normal" type="submit" name="actief">

 <i class="fa fa-user fa-fw"></i>

 <?php 

 echo $result['FIRST_NAME'], " ".$result['LAST_NAME'];

 echo $icon; 

 ?>                                              

</button>

Answer 1

如果我理解正确，您希望嵌套在按钮内的元素是可点击的，并且只有在点击该元素时才触发函数。如果按钮本身已被单击，您还希望运行单独的操作。您可以在整个按钮上运行事件侦听器，然后检查单击的元素e.target是按钮本身还是内部的 X。如果我误解了您的问题，请告诉我，我会尝试更正我的答案。const button = document.querySelector('button');const buttonClose = document.querySelector('.button__close');button.addEventListener('click',(e)=> {&nbsp; if(e.target.classList == buttonClose.classList){&nbsp; &nbsp; alert('Close Clicked')&nbsp; }});.button__close{&nbsp; background:white;&nbsp; padding:10px;&nbsp; display:inline-block;&nbsp; margin-left:5px;}<button>Example<span class='button__close'>x</span></button>