左键点击链接无效，但“在新标签页中打开”有效。

Question

左键点击链接无效，但“在新标签页中打开”有效。

javascriptjqueryhtmltwitter-bootstraphref

3

我正在制作个人网站（使用模板），当我完成时，我的链接不再响应左键点击。如果右键单击并选择“在新标签页中打开”，它们就可以正常工作。当你悬停在它们上面时，你可以在浏览器底部的状态栏中看到URL。

我已经做了很多搜索，似乎可能有一些JavaScript覆盖了标签的默认行为。我尝试查看Chrome和Firefox DevTools的Network和EventListener部分，但我不确定自己在寻找什么。

我不想在这里贴出整个站点的代码（太长了），但你可以从我的Github页面下载并自行尝试。

由于我认为问题与JavaScript有关，因此以下是我的站点头部和底部部分，以便您了解我附加了什么：

<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.com/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>

- rockitude

4

没人想要下载你的代码。JSFiddle - epascarello

3

如果你认为你的某个JS库可能是罪魁祸首，为什么不尝试删除它并测试你的链接，以确保它是否真的有问题呢？ - TylerH

1

似乎是bootstrap.min.js引起的。 - Nick R

2

首先，我建议您清理代码。您的代码中有来自BS3.0.0的.min.css和.min.js文件以及来自BS2.3.2的普通文件，还有许多不匹配的HTML注释块。当加载了bootstrap.min.js和jquery-1.10.2.min.js时，链接无法正常工作。只使用其中一个，链接就可以正常工作。 - user909694

你有在任何地方使用stopPropagation吗？显然它存在一个bug，会影响到bootstrap中的其他东西：http://css-tricks.com/dangers-stopping-event-propagation/ - Shakesy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sherbrow · Accepted Answer

轮播API会自动捕捉任何点击具有 data-slide 或 data-slide-to 参数的元素（拥有 data-slide 或 data-slide-to 属性的标签）。

您可以在其中一个主容器上设置 <div data-slide="1"> 属性（请参见 index.html#L68），因此任何点击都将被捕捉并阻止 (e.preventDefault())。

您可以在轮播插件定义中看到这一点，js/carousel.js#L187。

因此，您应该删除此属性并使用另一个属性名称，或禁用轮播API。