时间戳

首页 > 解决方案 > 按钮内的 HTML href（如 chrome 标签） 1 个按钮中有 2 个不同的点击功能

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

问题描述

我想在按钮内有一个 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>

标签： phphtml

解决方案

如果我理解正确，您希望嵌套在按钮内的元素是可单击的，并且仅在单击此元素时才触发功能。如果单击了按钮本身，您还希望运行单独的操作。

您可以在整个按钮上运行事件侦听器，然后检查单击的元素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>

推荐阅读