jquery 防止人们能够点击按钮内的图标

7xzttuei  于 2023-03-29  发布在  jQuery
关注(0)|答案(4)|浏览(162)

我正在做一个快速扔在一起的网站,需要用户能够与一个按钮进行交互,以执行删除操作。
我有我的按钮(代码如下所示),我有一个基本的引导按钮与一个图标配对(由他们的图书馆提供),用户点击删除一个“违规”

<button
  referencedInfraction="<%= i.infractionID %>"
  targetUserID="<%= i.userID %>"
  class="deleteButton btn btn-danger"
>
  <i class="bi bi-trash-fill"></i>
</button>

用户想要删除的违规行为通过一个属性传递给下面的代码。

$(".deleteButton").click((event) => {
  $("#confirmDeleteSingleInfractionModal").modal("toggle");

  let data = {
    infractionID: $(event.target).attr("referencedInfraction"),
    targetUserID: $(event.target).attr("targetUserID"),
  };

  console.log(data);

  $("#confirmDeleteSingleInfractionModal").on("hide.bs.modal", function () {
    console.log("deleting");

    $.ajax({
      type: "delete",
      url: `${window.location.origin}/dataLink/infraction`,
      data,
      success: () => {
        console.log("done");
      },
      error: () => {
        showInfractionDeleteError();
      },
    });
  });
});

然而,我遇到了一个问题,我注意到用户实际单击按钮的唯一方法是在没有<I>元素的边缘单击。
有什么方法可以防止在event.target()中显示此内容吗?
所有我想要的是自定义属性从按钮点击,而不是图像。
任何帮助都将不胜感激。

8wigbo56

8wigbo561#

如果在带有图标的元素上设置pointer-events: none,则应防止单击事件在其上触发,而不是使用按钮,允许您获取数据属性。示例:

.bi-trash-fill {
    pointer-events: none
}

或者任何对你的应用程序有意义的元素/类。这允许用户点击按钮上的任何地方(包括图标上),事件将从按钮中获取属性。

myzjeezk

myzjeezk2#

您可以检查被单击的元素是i标签还是button,并根据此更改选择器以获取所需数据。

演示代码

$('.deleteButton').click((event) => {
  console.log(event.target.tagName.toLowerCase())
  //get tag which is clicked change selector if needed
  var target = event.target.tagName.toLowerCase() === 'button' ? $(event.target) : $(event.target).parent()

  //$('#confirmDeleteSingleInfractionModal').modal('toggle');
  let data = {
    infractionID: target.attr('referencedInfraction'),
    targetUserID: target.attr('targetUserID')
  }

  console.log(data);
  //other codes..
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/v4-shims.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button referencedInfraction="1" targetUserID="12" class="deleteButton btn btn-danger"> <i class="fas fa-heart"></i> </button>
<button referencedInfraction="2" targetUserID="13" class="deleteButton btn btn-danger"><i class="fas fa-heart"></i> </button>
dw1jzc5e

dw1jzc5e3#

解决这个问题的最好方法是为图标<i></i>添加一个函数,一旦单击它就会被调用,在这个函数中,你可以调用通过单击按钮<button></button>本身调用的相同函数。你也可以将相同的数据从图标元素<i></i>传递到它的函数中,以便在按钮函数中使用。
注意:你不想阻止点击图标,因为这将是一个糟糕的UX(用户体验),但实际上你想把它用于正确的目的。

q3qa4bjr

q3qa4bjr4#

假设你有一个button,并且你正在添加一个click事件。如果你点击你放置在button中的任何元素,它都会落入while循环,直到它到达button,然后button将成为目标,这样你就可以访问它的属性

document.querySelector('button').addEventListener('click',(e)=>{
      let _target = e.target;
      while(_target.tagName.toLowerCase() !== 'button'){
       _target = _target.parentNode;
      }
     //do the rest of your code here.
     });

相关问题