jQuery how to disable onclick event fired by external script

Question

I have tried all the solutions listed in the following link: jQuery/HTML - Disable OnClick but none of them work for me.

I am trying to stop an onclick event from an external .js from firing. The .js is here http://x.instagramfollowbutton.com/follow.js - it can be unminified at http://unminify.com/

The script is included on my site with the following:

(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//x.instagramfollowbutton.com/follow.js";s.parentNode.insertBefore(g,s);}(document,"script")); 

The resulting HTML code is:

<span class="ig-follow" data-id="*deleted*" data-handle="*deleted*" data-count="true" data-size="small" data-username="false"><div title="Follow @*deleted* on Instagram" class="IGF small"><div class="ig-background"><img class="ig-camera" src="//x.instagramfollowbutton.com/components/instagram/v2/img/ig-camera.png" height="16" width="16"><span class="ig-text">Follow</span></div><div class="ig-count" id="c"><i></i><u></u><a>217</a></div></div></span>

How can I stop the external script's onclick event from firing?

Again, I have tried all the solutions listed in the following link: jQuery/HTML - Disable OnClick but none of them work for me.

Answer 1

Instagram seems to be very greedy with its click handlers. Try using .stopImmediatePropagation() instead. Note that IE support is 9+ for this.

Broken: https://jsfiddle.net/jmarikle/4Loukhm6/
Fixed: https://jsfiddle.net/jmarikle/4Loukhm6/1/

Never heard of .stopImmediatePropagation() before this, but this article seems to have a nice explination of it: https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//x.instagramfollowbutton.com/follow.js";s.parentNode.insertBefore(g,s);}(document,"script")); document.querySelector('.ig-follow').addEventListener('click', function(event){ event.stopImmediatePropagation(); }); 

 <span class="ig-follow" data-id="*deleted*" data-handle="*deleted*" data-count="true" data-size="small" data-username="false"><div title="Follow @*deleted* on Instagram" class="IGF small"><div class="ig-background"><img class="ig-camera" src="//x.instagramfollowbutton.com/components/instagram/v2/img/ig-camera.png" height="16" width="16"><span class="ig-text">Follow</span></div><div class="ig-count" id="c"><i></i><u></u><a>217</a></div></div></span>