Question

我有一个带有字体真棒图标的引导按钮。

<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>

我的点击事件：

$(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中，也可以单击图标，因为我使用按钮数据的几个属性，如果我只获取图标信息，我的功能将失败。有没有办法“禁用”图标，只是让它在那里，漂亮但不能触发任何东西？

Answer 1

您可以使用CSS禁用图标上的指针事件。

＆＃13;

<button type="button" class="btn pull-right rotate-picture-right" aria-label="Rotate" id="picture{{ picture.pk }}">
            <i class="fa fa-repeat" style="pointer-events:none" id="testright" aria-hidden="true"></i>
          </button>

＆＃13;

但是，处理此问题的更好方法是确保event.target与点击事件处理程序中的event.currentTarget相同。您始终可以通过查看event.currentTarget属性来获取按钮的参考，而不是图标。根据您使用的是vanilla JS还是像jQuery这样的框架，属性名称可能会有所不同。

样品：

＆＃13;

$('button').click(function(e) {
    console.log(e.delegateTarget); // This will be the button even if you click the icon
  })

＆＃13;

不同Event Targets

的方便参考

使按钮上的字体真棒图标不可点击

1 个答案: