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

Question

我有一个带有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中，也可以点击图标，因为我正在使用几个按钮数据的属性，如果我只获取图标信息，我的函数就会失败。有没有办法“禁用”图标，并使其只是存在并且漂亮，但不能触发任何东西？

- LizzAlice

---

Tried pointer-events: none? - CBroe

我只需要把它放在类定义中吗？ - LizzAlice

@LizzAlice 我认为这不应该是个问题，除非在 #testright 上有一个点击处理程序。你能否添加相关的 JS 代码到问题中，以展示问题？ - Nisarg Shah

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 相同。您可以始终通过查看 event.currentTarget 属性来获取按钮的引用而非图标的引用。属性名称可能会因使用原始 JavaScript 还是像 jQuery 这样的框架而有所不同。

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

不同事件目标的方便参考。

- Chirag Ravindra

---

关于目标...我尝试使用e.target.parentElement.target获取父级目标，但返回了未定义... - LizzAlice

e.target 将为您提供触发事件的元素。e.delegateTarget将为您提供按钮（即实际上注册处理程序的元素）。 - Chirag Ravindra

好的，下次我会知道，这次我想用CSS解决方案 :) - LizzAlice

使用 e.currentTarget。不要使用 delegateTarget，因为它无效（在JavaScript/HTML规范中甚至没有记录）。所以总结一下：e.target 是被点击的项（开始事件，比如按钮内部的 <i> 图标），e.currentTarget 是已注册事件处理程序的对象（例如按钮本身）。最后我再说一遍：e.delegateTarget = 无效的HTML/JS，请勿使用。它实际上来自jQuery，因此不是普适的建议。 - Mitch McMabers