javascript – 在按钮上制作字体真棒图标不可点击

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

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

解决方法:

您可以使用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与click事件处理程序中的event.currentTarget相同.通过查看event.currentTarget属性,您始终可以获得按钮的引用而不是图标.根据您使用的是vanilla JS还是像jQuery这样的框架,属性名称可能会有所不同.

样品：

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

方便参考不同的Event Targets

标签：javascript,twitter-bootstrap,google-chrome,font-awesome
来源： https://codeday.me/bug/20190823/1697981.html