按钮内的HTML href（如chrome选项卡）1个按钮中的2个不同的单击功能

Question

I want to have a X inside a button just like the X in the chrome tabs. So I have 4 buttons which will give me a POST when I click on 1 of them. Now I want to have a X icon inside that button to redirect to a different page/run a function

Example:

I tried to put a href inside the button but it doesn't work... the X will be blue like a href, but when i click on it, it will only click the button.

<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

If i'm understanding correctly, you want an element nested inside of the button to be clickable and fire a function only when this element is clicked. You also want a separate action to run if the button itself has been clicked.

You can run an event listener on the whole button then check if the element clicked via e.target was the button itself OR the X inside.

If i have misinterpreted your question please let me know and i will try and correct my answer.

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>

</div>