按钮内的 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)=> {

  if(e.target.classList == buttonClose.classList){

    alert('Close Clicked')

  }

});

.button__close{

  background:white;

  padding:10px;

  display:inline-block;

  margin-left:5px;

}

<button>Example<span class='button__close'>x</span></button>