jQuery .click function converted to javascript

Question

I wrote this script to pop up a confirm dialog when a user clicks on any link external from our site. It performs as expected on our internet site, however when I try to run this script on our FAQ portal, it does absolutely nothing. I believe it is blocking jQuery from running. What would be your recommendation to converting this script to javascript?

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">

    $(function(){
        $('a').click(function(){

        if ((this.href.toLowerCase().indexOf("myfloridalicense.custhelp") > -1) || 
            (this.href.toLowerCase().indexOf("myfloridalicense") > -1) ||
            (this.href.toLowerCase().indexOf("javascript") > -1) ||
            (this.href.toLowerCase().indexOf("dbprftp") > -1) ||
            (this.href.toLowerCase().indexOf("interredesignalpha") > -1) ||
            (this.href.toLowerCase().indexOf("bpr") > -1))
        {

            //Throw away
        } 
        else {
            if (window.confirm('NOTICE: By accessing this link, you will be leaving the DBPR website. DBPR is not responsible for the content of the Internet website you are entering. DBPR neither warrants nor makes any representations nor endorsements as to the accuracy, quality, content or completeness of the information, text, images, graphics, hyperlinks, and other items contained on the Internet website you are entering. DBPR is not responsible or liable for any viruses or contaminations of your hardware, software, peripherals or property, resulting from use of the Internet websites linked to or from the DBPR Internet website. Do you want to proceed?'))
            {
                // They clicked Yes
            }
            else
            {
                // They clicked no
                return false;
            }
        }
        });
    });
</script>

Thanks in advance for your help!

@Barmar I thought the same thing, but I was successfully able to bind a mouseup event to an anchor tag. — Tgust, Jul 13 '15 at 21:24
I went to your FAQ portal, opened Developer Tools, and entered `jQuery` into the Javascript console. It said it's not defined. — Barmar, Jul 13 '15 at 21:27
How does your anchor tag look like? Does it have an id? Can you paste the code? — Keerthi, Jul 13 '15 at 21:48

Keerthi · Answer 1 · 2015-07-13T20:37:58.473

function test(){
  event.preventDefault(); 
  var path = $('a').prop('href');
  if ((path.toLowerCase().indexOf("myfloridalicense.custhelp") > -1) || 
        (path.toLowerCase().indexOf("myfloridalicense") > -1) ||
        (path.toLowerCase().indexOf("javascript") > -1) ||
        (path.toLowerCase().indexOf("dbprftp") > -1) ||
        (path.toLowerCase().indexOf("interredesignalpha") > -1) ||
        (path.toLowerCase().indexOf("bpr") > -1))
    {

        //Throw away
    } 
        else {
            if (window.confirm('NOTICE: By accessing this link, you will be leaving the DBPR website. DBPR is not responsible for the content of the Internet website you are entering. DBPR neither warrants nor makes any representations nor endorsements as to the accuracy, quality, content or completeness of the information, text, images, graphics, hyperlinks, and other items contained on the Internet website you are entering. DBPR is not responsible or liable for any viruses or contaminations of your hardware, software, peripherals or property, resulting from use of the Internet websites linked to or from the DBPR Internet website. Do you want to proceed?'))
            {
                // They clicked Yes
            }
            else
            {
                // They clicked no
                return false;
            }
        }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="www.google.com" onClick="javascript:test(); return false;"> Link </a>

The question was how to run this code without jQuery. `$('a').prop('href')` is jQuery. Also, you don't need `javascript:` in `onclick` attributes. — Barmar, Jul 13 '15 at 21:08
Your `onclick` returns `false` even if the `test()` function doesn't. So it will never follow the link. — Barmar, Jul 13 '15 at 21:09
Hey thank you so much for your help @Keerthi! I'm having an issue understanding how this would work though. The URL's are dynamically generated so I don't have the option of adding onClick events to each individual external link. — Tgust, Jul 13 '15 at 21:17

score 0 · Accepted Answer · answered Jul 13 '15 at 20:31

My first guess would be that your portal has a listener attached for all anchor tags to prevent leaving the portal page. More than likely, jQuery is not blocked, the click on the anchor tag is blocked.

You can verify this by binding to the mouseup event on the anchor tags (or one in particular). It's possible that the portal is also cancelling those events, but many people only think to bind to the click.

If you have any control over the page, try adding a click listener to something OTHER than an anchor tag, say a specific div or list item. This will answer whether jQuery is active or not. Once you know the answer to that question, you can decide your next course of action.

Thank you so much for your help @murmeister. I bound the mouseup event to the anchor tags, and could see the appended test text on mouseup and mousedown. How would you recommend implementing the mouseup event in place of the click listener? — Tgust, Jul 13 '15 at 20:48

score 0 · Answer 3 · edited May 23 '17 at 12:14

Same as Keerthi's answer, but uses unobtrusive Javascript:

function test(){
 if ((this.href.toLowerCase().indexOf("myfloridalicense.custhelp") > -1) || 
            (this.href.toLowerCase().indexOf("myfloridalicense") > -1) ||
            (this.href.toLowerCase().indexOf("javascript") > -1) ||
            (this.href.toLowerCase().indexOf("dbprftp") > -1) ||
            (this.href.toLowerCase().indexOf("interredesignalpha") > -1) ||
            (this.href.toLowerCase().indexOf("bpr") > -1))
        {

            //Throw away
        } 
        else {
            if (window.confirm('NOTICE: By accessing this link, you will be leaving the DBPR website. DBPR is not responsible for the content of the Internet website you are entering. DBPR neither warrants nor makes any representations nor endorsements as to the accuracy, quality, content or completeness of the information, text, images, graphics, hyperlinks, and other items contained on the Internet website you are entering. DBPR is not responsible or liable for any viruses or contaminations of your hardware, software, peripherals or property, resulting from use of the Internet websites linked to or from the DBPR Internet website. Do you want to proceed?'))
            {
                // They clicked Yes
            }
            else
            {
                // They clicked no
                return false;
            }
        }
    }

document.getElementById('mySuperImportantLink').addEventListener('click', test, false);

HTML:

<a href="javascript:void(0)" id="mySuperImportantLink"> Link </a>

See this SO question for more details on unobtrusive Javascript.

Using this method, wouldn't I have to append a unique ID to each external link? — Tgust, Jul 13 '15 at 21:20
If you have multiple links, all of which you want to run `test()` on `click`, you can apply a class `mySuperClass` to all your links, and then iterate through and apply an event listener to each element returned by `document.getElementsByClass('mySuperClass')` — heartyporridge, Jul 13 '15 at 22:56

jQuery .click function converted to javascript

3 Answers3