Making an IMG unselectable, IE9 compatible

Making an IMG unselectable, IE9 compatible

I've discovered that the non-standard CSS to make something unselectable doesn't work in IE9:

  1. .unselectable, [data-em] {
  2.       -webkit-touch-callout: none;
  3.       -webkit-user-select: none;
  4.       -khtml-user-select: none;
  5.       -moz-user-select: -moz-none;
  6.       -ms-user-select: none;
  7.       user-select: none;
  8.       -webkit-tap-highlight-color: rgba(0,0,0,0);
  9. }

When a user inserts an emoji to my contenteditable, I don't want them to be able to click on it and drag to change the size... backspacing to delete it is necessary, I just don't want them to mess with the size.

I know that I can apply the attribute unselectable="on", but I have to do that manually on each emoji. Considering a message board where a thread can have hundreds of replies, and dozens of emojis on each reply, that's just a lot of unnecessary HTML. So I'm hoping to find a jQuery solution.

The image looks like this:

<img src="image.gif" data-em="47" alt="">

The emojis always have the data-em="xx" attribute, so I thought this would work:

  1. $('img[data-em]')
  2.       .on('mousedown selectstart drag dragstart dragend', function(e) {
  3.             console.log('made it');
  4.             e.preventDefault ? e.preventDefault() : e.returnValue = false;
  5.             e.target.unselectable = true;
  6.       });

but when I click on the emoji it doesn't look like the event is being triggered at all (nothing in the console).

Can you guys suggest what I might be doing wrong? Or any other ideas on how to make it unselectable in IE9?

FWIW, I know that IE9 is an old browser, but I still have a significant amount of traffic using it. IE8 and 7 still show up, too, but they represent less than 0.1% of my traffic so I'm OK with ignoring them.