使按钮上的超赞字体图标不可单击

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中，无论我单击图标还是按钮都没有任何区别，按钮会触发on click事件。但是，在Chrome中，也可以单击图标，并且由于我正在使用按钮数据的多个属性，因此，如果我仅获得图标信息，则功能将失败。有没有一种方法可以“禁用”该图标，并且仅使它出现并且漂亮但不能触发任何内容？

Answer 1

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

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

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

样品：

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

方便参考不同的事件目标