Question

我希望按钮内有一个X，就像chrome标签中的X一样。因此，我有4个按钮，当我单击其中1个按钮时会给我一个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>

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

1 个答案: