我有一个带有font-awesome图标的bootstrap按钮。
<button type="button" class="btn pull-right rotate-picture-right" aria-label="Rotate" id="picture{{ picture.pk }}">
<i class="fa fa-repeat" id="testright" aria-hidden="true"></i>
</button>
我的 on-click 事件:
$(document).on('click', '.rotate-picture-right', function (e) {
rotate_and_reload(e, "right");
});
这个功能:
function rotate_and_reload(e, direction){
var picture_id = e.target.id.replace("picture", "")
var url = "{% url "device-api-picture-rotate" device.pk 0 "placeholder" %}".replace("pictures/0", "pictures/"+picture_id).replace("placeholder", direction)
$.ajax({
url: url,
type: 'PATCH',
success: function() {
var d = new Date();
img = e.target.parentElement.parentElement.getElementsByTagName('img')[0];
if (img.src.includes("?")){
img.src = img.src.split("?")[0] + '?' + d.getTime();
} else {
img.src = img.src + '?' + d.getTime();
}
},
});
}
在Firefox中,无论我点击图标还是按钮,单击事件都会触发按钮。然而,在Chrome中,也可以点击图标,因为我正在使用几个按钮数据的属性,如果我只获取图标信息,我的函数就会失败。有没有办法“禁用”图标,并使其只是存在并且漂亮,但不能触发任何东西?
pointer-events: none
? - CBroe#testright
上有一个点击处理程序。你能否添加相关的 JS 代码到问题中,以展示问题? - Nisarg Shah