我在元素中有一些 onClick 事件,因此当用户单击链接时会调用它们。这很好用,看起来像这样:
富
不幸的是,如果用户在新选项卡中打开链接(例如,右键单击-> 在新选项卡中打开),我的 onLinkClick 函数不会被调用。Firefox 会发生这种情况(各种版本,包括最新版本 - 1.5.0.1)。
有谁知道是否有办法解决这个问题,甚至可以捕捉到“在新标签中打开”的点击/事件?
谢谢!
我在元素中有一些 onClick 事件,因此当用户单击链接时会调用它们。这很好用,看起来像这样:
富
不幸的是,如果用户在新选项卡中打开链接(例如,右键单击-> 在新选项卡中打开),我的 onLinkClick 函数不会被调用。Firefox 会发生这种情况(各种版本,包括最新版本 - 1.5.0.1)。
有谁知道是否有办法解决这个问题,甚至可以捕捉到“在新标签中打开”的点击/事件?
谢谢!
您需要使用preventDefault
右键单击的方法。
在 jQuery 中,您可以这样做:
$(document).on("mousedown", "a", function(e) {
if( e.which === 3 ) {
e.preventDefault();
//do something now
}
});
使用 1 左键单击,2 中键单击,3 右键单击。
在 JavaScript 中:
<a href="#" onmousedown="mouseDown(event);">aaa</a>
function mouseDown(e) {
e = e || window.event;
switch (e.which) {
case 1: alert('left'); break;
case 2: alert('middle'); break;
case 3: alert('right'); break;
}
}
所以我遇到了这个问题并得出结论,修改用户行为以禁止在桌面和移动设备的新选项卡和上下文菜单中打开是可行的方法。
另一种方法是将外部链接以内部重定向链接格式与讨厌的查询字符串混淆。必须在用户体验透明度方面做一些数字,所以我将我们的锚标签直接链接到外部资源。
您可以通过以下组合防止在移动设备上单击并按住以及右键单击桌面上的选择和标注:
您希望人们点击的锚点上的 CSS 修饰符:
a {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
在您的文档加载时添加此事件侦听器:
window.addEventListener('contextmenu', function (e) {
// do something here...
e.preventDefault();
}, false);
现在所有的点击都将通过 onClick,因为对于 80% 的情况,人们无法在新标签中打开,他们只能点击。起初人们可能会感到困惑,但尽管您可以根据您的逻辑需要在 onClick 处理程序中使用 preventDefault() 方法并在 onClick 处理程序中启动用户分析,但您仍然可以留下一个清晰的链接到您的下一个 url。:)
于 2020 年 12 月在 iPhone iOS 14 和 Android 9 以及 Windows 10 上的 Chrome 和 Firefox 上运行。