0

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.

Community
  • 1
  • 1
David Z
  • 93
  • 1
  • 3
  • 19
  • 1
    If the element is in an iframe of a different domain, you can not touch that click event. – epascarello Feb 22 '16 at 17:30
  • Nope its not in an iframe, its within my domain – David Z Feb 22 '16 at 17:30
  • You sure it doesn't wrap it inside iframe??? – A. Wolff Feb 22 '16 at 17:31
  • 1
    `.ig-follow { pointer-events: none; }` would be enough then on modern browser, otherwise check which element is bound click handler and remove it. But that's not clear exactly why you are trying to do. Bind your own event or just remove all click ones making button useless? A simple example replicating your issue would certainly help – A. Wolff Feb 22 '16 at 17:34
  • I never ever ever expected a CSS solution to this that worked LOL. Amazing, thank you – David Z Feb 22 '16 at 17:35
  • 2
    But keep in mind [caniuse](http://caniuse.com/#feat=pointer-events) Support on IE is really bad – A. Wolff Feb 22 '16 at 17:36
  • Yep noted, firing it off isn't super bad but it affects the user experience slightly. Put it as an answer so I can accept it? – David Z Feb 22 '16 at 17:37
  • You probably want to show what you tried with JavaScript. My guess is either your code is being called before they add the events. Other option could be to just hide the button if you do not want it. – epascarello Feb 22 '16 at 17:37
  • Every single one here http://stackoverflow.com/questions/19320195/jquery-html-disable-onclick - I added the code right at the bottom of my scripts, which includes all the relevant scripts, I even tried using a window.onload function, nothing worked – David Z Feb 22 '16 at 17:38

1 Answers1

0

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>
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • @DavidZ What browser are you using? Even stripping the demo of the jsfiddle junk still works for me: http://output.jsbin.com/ragizehumu – Joseph Marikle Feb 22 '16 at 17:55
  • Google Chrome, I'm running all the jQuery commands in the console and laughing when they all fail, start a discussion with me and I'll show you a live link? – David Z Feb 22 '16 at 18:00
  • @DavidZ Sure. Just head over to http://chat.stackoverflow.com/ and I can invite you or you can invite me. Edit: Actually I'll have to invite you. I think that's a privilege setting. – Joseph Marikle Feb 22 '16 at 18:07
  • @JosehMarikle okay I'm there – David Z Feb 22 '16 at 18:11