我正在做一个快速扔在一起的网站,需要用户能够与一个按钮进行交互,以执行删除操作。
我有我的按钮(代码如下所示),我有一个基本的引导按钮与一个图标配对(由他们的图书馆提供),用户点击删除一个“违规”
<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()
中显示此内容吗?
所有我想要的是自定义属性从按钮点击,而不是图像。
任何帮助都将不胜感激。
4条答案
按热度按时间8wigbo561#
如果在带有图标的元素上设置
pointer-events: none
,则应防止单击事件在其上触发,而不是使用按钮,允许您获取数据属性。示例:或者任何对你的应用程序有意义的元素/类。这允许用户点击按钮上的任何地方(包括图标上),事件将从按钮中获取属性。
myzjeezk2#
您可以检查被单击的元素是
i
标签还是button
,并根据此更改选择器以获取所需数据。演示代码:
dw1jzc5e3#
解决这个问题的最好方法是为图标
<i></i>
添加一个函数,一旦单击它就会被调用,在这个函数中,你可以调用通过单击按钮<button></button>
本身调用的相同函数。你也可以将相同的数据从图标元素<i></i>
传递到它的函数中,以便在按钮函数中使用。注意:你不想阻止点击图标,因为这将是一个糟糕的UX(用户体验),但实际上你想把它用于正确的目的。
q3qa4bjr4#
假设你有一个button,并且你正在添加一个click事件。如果你点击你放置在button中的任何元素,它都会落入while循环,直到它到达button,然后button将成为目标,这样你就可以访问它的属性。