javascript - Left-clicking links doesn't work, but 'Open in New Tab' does

I'm working on my personal website (building from a template) and just as I finished up, my links stopped responding to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.

I've done a fair bit of searching about this already, and it seems there may be some JavaScript that's overriding the default behavior for the tag. I've tried looking in the Network and EventListener sections of the Chrome and Firefox DevTools, but I'm not entirely sure what I'm looking for.

I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.

Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:

<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Mike Lipson | Instructional Technology Specialist</title> 

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">    

<link href='+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


<link rel="prefetch" href="images/zoom.png">

<style type="text/css" media="screen">
    a.heading_link {
        color: white;
    }
</style>

    <!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>

<!-- fancybox init -->
<script>
$(document).ready(function(e) {
    var lis = $('.nav > li');
    menu_focus( lis[0], 1 );

    $(".fancybox").fancybox({
        padding: 10,
        helpers: {
            overlay: {
                locked: false
            }
        }
    });

});
</script>

I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.

Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:

<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Mike Lipson | Instructional Technology Specialist</title> 

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">    

<link href='http://fonts.googleapis./css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


<link rel="prefetch" href="images/zoom.png">

<style type="text/css" media="screen">
    a.heading_link {
        color: white;
    }
</style>

    <!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>

<!-- fancybox init -->
<script>
$(document).ready(function(e) {
    var lis = $('.nav > li');
    menu_focus( lis[0], 1 );

    $(".fancybox").fancybox({
        padding: 10,
        helpers: {
            overlay: {
                locked: false
            }
        }
    });

});
</script>

Share Improve this question asked May 22, 2014 at 13:33 rockitude 752 silver badges7 bronze badges

4 No one wants to download your code. JSFiddle – epascarello Commented May 22, 2014 at 13:38
3 If you think one of your JS libraries might be the culprit, why don't you try removing it and testing your links to find out for sure? – TylerH Commented May 22, 2014 at 13:41
1 bootstrap.min.js seems to cause it. – Nick R Commented May 22, 2014 at 13:45
2 First, I would remend you clean up your code.. You've got .min.css and .min.js files from BS3.0.0 and the normal ones from BS2.3.2, and you also have numerous mismatched ment blocks in your HTML. When both bootstrap.min.js and jquery-1.10.2.min.js are loaded, links don't work. With just one or the other, they're fine. – user909694 Commented May 22, 2014 at 14:20
Do you use stopPropagation anywhere? Apparently there is a bug with it affecting other stuff in bootstrap: css-tricks./dangers-stopping-event-propagation – Shakesy Commented May 22, 2014 at 15:36

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

The carousel API automatically catches any click on [data-slide] or [data-slide-to] elements (tags that possess the data-slide or data-slide-to argument).

And you set on one of your main containers the <div data-slide="1"> attribute (see index.html#L68) therefore any click will be catched and prevented (e.preventDefault()).

You can see that in the carousel plugin definition js/carousel.js#L187.

So you should either remove this attribute and use another attribute name, or deactivate the carousel API.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Left-clicking links doesn't work, but 'Open in New Tab' does - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)