如何检测用户是否尝试在新标签中打开链接？ [英] How to detect if user it trying to open a link in a new tab?
问题描述
我正在编写一个网站，其中所有内容都存储在JavaScript环境中，因此应该可以在页面之间导航而无需额外的HTTP请求。
I'm writing a website in which all content is stored in the JavaScript environment, so it should be possible to navigate between "pages" without additional HTTP requests.
但是，我想保留用户关于如何打开链接的意图。例如，如果Mac用户apple +点击链接，则应在新选项卡中打开它。但是如果用户想要在当前窗口中打开一个链接，我想避免发出新的HTTP请求，只需使用DOM操作来显示新内容。
I want to preserve the user's intent with respect to how links are opened, though. If a Mac user apple+clicks a link, for example, it should be opened in a new tab. But if the user wants to open a link in the current window, I want to avoid making a new HTTP request, and just use DOM manipulation to show the new content.
这是我尝试过的（ JSFiddle ）：
<a href="http://yahoo.com" id="mylink">Yahoo!</a>
document.getElementById("mylink").onclick = function() {
alert("clicked");
return false;
}
它的行为符合正常左键点击和上下文菜单操作的要求，但是不适用于带有修饰键的点击。我可以检查某些修饰键是否被保留，但这看起来很脆弱。
It behaves as desired for normal left clicks, and for context menu actions, but not for clicks with a modifier key. I could check whether certain modifier keys are held, but that seems fragile.
Twitter的网站有类似于我想要的行为 - 当你点击用户名时，它通常是一个AJAX请求，但如果你点击持有的元键，你会得到一个新标签。
Twitter's website has behavior similar to what I want - when you click a username, it's normally an AJAX request, but if you click with a meta key held, you get a new tab.
我更喜欢没有库的普通JavaScript解决方案，除非这需要一堆特定于平台的逻辑。
I'd prefer a plain JavaScript solution without libraries, unless this requires a bunch of platform-specific logic.
我看了一下GitHub的代码，它也有我的行为之后，它确实检查了某些按键被关闭。所以我接受克里斯的答案，因为似乎没有更好的选择。
I took a look at GitHub's code, which also has the behavior I'm after, and it does check for certain keys being held. So I'm accepting Chris's answer , since it seems unlikely that there's a better alternative.
$(document).on("click", ".js-directory-link", function (t) {
return 2 === t.which || t.metaKey || t.ctrlKey ? void 0 : ($(this).closest("tr").addClass("is-loading"), $(document.body).addClass("disables-context-loader"))
}
推荐答案
你可以检查 ctrlKey ， shiftKey 和 metaKey 事件对象的属性。如果其中一个为true，则为key control，shift或meta（Apple命令）键正在举行，您应该允许默认链接操作继续。否则，您使用 preventDefault 来停止链接操作并使用javascript处理它。
You can examine the ctrlKey, shiftKey, and metaKey properties of the event object. If either is true, the key control, shift, or meta (Apple's command) key is being held and you should allow the default link action to proceed. Otherwise, you use preventDefault to stop the link action and handle it with javascript instead.
将 target =_ blank添加到您的锚标记中，因此默认链接行为是打开一个新标签。否则它将打开顶部当前页面（可能是desi红色）。
Add target="_blank" to your anchor markup, so the default link behavior is opening a new tab. Otherwise it will open on top of the current page (that may be desired).
这里是javascript，无论如何：
Here's the javascript, either way:
document.getElementById("mylink").onclick = function(evnt) {
if (
evnt.ctrlKey ||
evnt.shiftKey ||
evnt.metaKey || // apple
(evnt.button && evnt.button == 1) // middle click, >IE9 + everyone else
){
return;
}
evnt.preventDefault();
alert("clicked");
return false;
}
小提琴：http://jsfiddle.net/6byrt0wu/
文档
- MDN活动 - https://developer.mozilla .org / zh-CN / docs / Web / API / Event
-
Event.ctrlKey- https://developer.mozilla.org/en-US/docs/Web/API/event.ctrlKey -
Event.shiftKey- https://developer.mozilla.org/en-US/docs/Web/API/event.shiftKey -
Event.metaKey- https：// developer.mozilla.org/en-US/docs/Web/API/event.metaKey -
a标签 - https ：//developer.mozilla.org/en-US/docs/Web/HTML/Element/a
- MDN Events - https://developer.mozilla.org/en-US/docs/Web/API/Event
Event.ctrlKey- https://developer.mozilla.org/en-US/docs/Web/API/event.ctrlKeyEvent.shiftKey- https://developer.mozilla.org/en-US/docs/Web/API/event.shiftKeyEvent.metaKey- https://developer.mozilla.org/en-US/docs/Web/API/event.metaKeyatag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
这篇关于如何检测用户是否尝试在新标签中打开链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
