Make font-awesome icon on button not clickable

Question

I have a bootstrap button with a font-awesome icon on it.

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

My on-click event:

$(document).on('click', '.rotate-picture-right', function (e) {
  rotate_and_reload(e, "right");
});

The function:

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();
          }

        },
    });
}

In Firefox, it doesn't make any difference whether I click on the icon or on the button, the on click event is triggered for the button. In Chrome however, it is also possible to click on the icon and as I am using several properties of the buttons data, my function fails if I only get the icons information. Is there a way to "disable" the icon and only make it be there and be pretty but not be able to trigger anything?

Answer 1

You can use CSS to disable pointer events on the icon.

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

However, a better way to handle this would be to ensure that the event.target is the same as the event.currentTarget in your click event handler. You can always get the reference of the button and not the icon by looking at the event.currentTarget property. The property name might be different based on whether you are using vanilla JS or a framework like jQuery.

Sample:

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

Handy reference for different Event Targets