如何让Bootstrap按钮上的Font Awesome图标不触发点击事件？

我来帮你分析下问题并给出两种可行的解决方案，看你更倾向哪种：

问题根源 #

你遇到的差异是因为事件触发时的目标元素不同：

• 在Firefox里，点击图标时事件冒泡的处理可能让e.target指向了按钮；但在Chrome中，点击图标时e.target明确指向<i>标签本身。
• 你的函数依赖e.target.id来提取图片ID，但图标本身的ID是testright，不是按钮的picture{{ picture.pk }}，所以提取出来的内容完全错误，导致后续AJAX请求的URL拼接失败，函数执行出错。

方案一：让图标仅作为展示元素（不触发任何事件） #

如果你的需求是点击图标时不触发任何事件，只有点击按钮的空白区域才触发，最简单的方法是给图标添加CSS禁用鼠标事件：

1. 给图标标签直接添加内联样式：

<i class="fa fa-repeat" id="testright" aria-hidden="true" style="pointer-events: none;"></i>

或者单独写CSS样式（更适合批量图标）：

.fa-repeat {
  pointer-events: none;
}

pointer-events: none会让图标完全忽略鼠标事件，点击图标时相当于直接点击在下方的按钮上，此时e.target就是按钮元素，函数能正确获取图片ID。

方案二：修复函数，让点击图标也能正常执行 #

如果希望点击图标也能触发按钮的功能，只需要修改函数里获取按钮元素的逻辑，不要依赖e.target，而是向上找到按钮父元素：

修改你的rotate_and_reload函数：

function rotate_and_reload(e, direction){
  // 不管点击的是按钮还是图标，都找到对应的按钮元素
  const button = e.target.tagName === 'I' ? e.target.parentElement : e.target;
  const picture_id = button.id.replace("picture", "");
  
  // 后续URL拼接和AJAX逻辑保持不变
  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();
      // 同样，用按钮元素向上找图片更可靠
      const img = button.parentElement.parentElement.getElementsByTagName('img')[0];
      if (img.src.includes("?")){
        img.src = img.src.split("?")[0] + '?' + d.getTime();
      } else {
        img.src = img.src + '?' + d.getTime();
      }
    },
  });
}

如果用jQuery的话，代码可以更简洁（利用closest方法快速找到按钮）：

function rotate_and_reload(e, direction){
  const $button = $(e.target).closest('.rotate-picture-right');
  const picture_id = $button.attr('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();
      const $img = $button.parent().parent().find('img');
      let src = $img.attr('src');
      src = src.includes("?") ? src.split("?")[0] + '?' + d.getTime() : src + '?' + d.getTime();
      $img.attr('src', src);
    },
  });
}

这样不管点击按钮还是图标，都能正确提取到图片ID，函数在Chrome和Firefox里都能正常工作。

内容的提问来源于stack exchange，提问作者LizzAlice