确定 onclick 时单击的链接是否要打开新窗口或选项卡

2024-03-23

大多数现代浏览器都支持这些命令ctrl+click or command+click或类似于在新选项卡或新窗口中打开链接。

在应用程序中,我希望在单击时禁用链接。但前提是目标是同一个窗口(例如,如果它在新选项卡中打开,我不希望链接被禁用,因为再次单击它是合理的)。

我做了一些尝试并调试了单击时创建的事件对象 - 但我找不到有关目标是新选项卡还是新窗口的任何信息。

已知的解决方法:当然可以检查在单击特定链接时是否按下了某个键,这是一件简单的事情 - 但由于这些命令因浏览器和操作系统而异,因此必须定义复杂的映射和谁现在确切地知道用户配置了什么等等。

有没有可靠的方法来确定是否应在新选项卡或窗口中打开该位置?


这里有一个工作示例:http://jsfiddle.net/pioul/eCuNU/4/ http://jsfiddle.net/pioul/eCuNU/4/

仅当链接将在新选项卡/窗口中打开时,此脚本才允许单击链接(基于target="_blank"属性。

HTML:

<a href="http://google.fr" target="_blank">new window</a>
<a href="http://google.fr" target="_self">same window 1</a>
<a href="http://google.fr" target="">same window 2</a>

jQuery:

$("a").bind("click", function(e){
    if($(this).attr("target") != "_blank"){
        e.preventDefault();
    }
});

EDIT:

您可以像这样考虑 ctrl + 单击:

$("a").bind("click", function(e){
    if($(this).attr("target") != "_blank"){
        if(!e.ctrlKey){
            e.preventDefault();
        }
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

确定 onclick 时单击的链接是否要打开新窗口或选项卡 的相关文章

  • 使用 keyup 上的 Submit() 提交表单两次

    我有一个与此类似的 jQuery HTML 代码
  • 优化数据可视化 Web 应用程序的性能

    我正在重写 3 年前编写的数据可视化网络工具 从那时起 浏览器的 JavaScript 引擎变得更快 所以我正在考虑将部分工作从服务器转移到客户端 在页面上 数据在表格和地图 或图表 中可视化 它使用相同的数据 但以不同的方式 因此准备显示
  • 茉莉花单元测试 - 测试对象的未定义属性

    我有以下声明 expect A BAR name toEqual foo 由于我的对象 A 具有顶级属性 BAR 并且 bar 具有值 foo 传递 我想测试我的结构以确认属性 NONEXISTINGPROP 尚未定义 例如 expect
  • Chrome 内存/垃圾收集问题

    我在使用 Chrome 时遇到内存 垃圾收集问题 我正在开发一个照片上传网站 该网站允许我的客户使用 HTML5 和文件 API 拖放照片进行上传 因此这在 IE 中不起作用 它仅适用于 Chrome 和 FF 我还没有在 Safari O
  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • 模型不是 AngularJS 中输入的日期对象

    使用 AngularJS 我试图使用输入显示日期type date
  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
  • 如何将 HTML 链接放入电子邮件正文中?

    我有一个可以发送邮件的应用程序 用 Java 实现 我想在邮件中放置一个 HTML 链接 但该链接显示为普通字母 而不是 HTML 链接 我怎样才能将 HTML 链接放入字符串中 我需要特殊字符吗 太感谢了 Update 大家好你们好 感谢
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • 很奇怪!调用 window.location 或 location.replace 会重定向到该页面,然后再次返回!

    我处于调试模式 因此我可以看到正在访问哪个页面 当我打电话时window location or window location replace 它会转到该页面 然后返回原始页面 怎么会这样 解决方案是添加 window location
  • 使用 Socket.IO 时如何访问会话标识符?

    我有一个聊天 我需要管理独特的连接 我四处搜寻 但我找到的解决方案似乎都已被弃用 那么 如何使用 Socket IO 获取套接字的会话 ID 我在用着Node js http en wikipedia org wiki Node js Ex
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 如何从react-bootstrap复选框获取值/属性?

    我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网
  • React 错误:目标容器不是 DOM 元素

    我刚刚开始使用 React 所以这可能是一个非常简单的错误 但我们开始吧 我的html代码非常简单 load staticfiles

随机推荐