将JS保留在JS中！

Question

我负责工作的网站，最近我添加了ajaxy请求，以使其更快，响应更快。但它引发了一个问题。

在我的页面上，左侧有一个索引表，就像菜单一样。单击它后，它会发出填充页面其余部分的请求。您可以随时单击索引的其他项目以加载其他页面。

在添加javascript之前，可以为索引的每个项目中间点击（打开新选项卡），这允许在我处理其中一个时加载其他页面。但由于我已将所有链接更改为ajax请求，因此它们现在执行一些javascript而不是真正的链接。因此，当我中间点击它们时，它们只会打开空标签。

有没有办法结合两种功能：左键单击时触发javascript的链接或中间单击时触发新标签？它是否必须是一些丑陋的JavaScript来捕获每次点击并相应地处理它们？

感谢。

Answer 1

是。而不是：

<a href="javascript:code">...</a>

这样做：

<a href="/non/ajax/display/page" id="thisLink">...</a>

然后在你的JS中，通过它的ID挂钩链接来进行AJAX调用。请记住，您需要阻止点击事件冒泡。大多数框架都内置了一个可以调用的事件杀手（只需查看它的Event类）。

这是jquery中的事件处理和事件杀手：

$("#thisLink").click(function(ev, ob) {
    alert("thisLink was clicked");
    ev.stopPropagation();
});

当然你可以更加聪明，同时处理这样的事情，但我认为重要的是要强调这个方法所以比使用onclick属性更清晰。

将JS保留在JS中！

Answer 2

是的，您需要查找渐进增强和不引人注目的Javascript，并编写您的网站以便首先使用Javascript，然后在基本网站工作后添加Javascripts功能。

Answer 3

我喜欢Oli的方法，但它没有从左键和中键点击中辨别出来。检查eventArgs上的“which”字段会让你知道。

$(".detailLink").click(function (ev, ob) {
    //ev.which == 1 == left
    //ev.which == 2 == middle
    if (ev.which == 1) {
        //do ajaxy stuff

        return false; //tells browser to stop processing the event
    }
    //else just let it go on its merry way and open the new tab.
});

Answer 4

这需要一些测试，但我相信大多数浏览器在你点击时都不会执行点击处理程序，这意味着只使用了链接。

但是，处理程序函数不需要返回false以确保在正常单击时不使用这些链接。

修改感觉到这可以用一个例子：

<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" />

Answer 5

<a href="/original/url" onclick="return !doSomething();">link text</a>

有关详细信息和详细说明，请查看my answer in another post。

Answer 6

可能，我每次都可以提供两个链接，一个触发javascript，另一个是允许中间点击的真实链接。我认为，其中一个必须是一个图像，以避免重载索引。

Answer 7

对于该类型的点击，不会触发onclick事件，因此您需要添加实际有效的href属性。一种可能的方法是通过向URL添加#bookmark来向目标页面指示所需状态是什么。

中间点击（新标签页）和javascript链接

7 个答案:

将JS保留在JS中！