区分鼠标和键盘触发onclick

2024-04-14

我需要找到一种方法来确定链接是否已通过鼠标单击或按键激活。

<a href="" onclick="submitData(event, '2011-07-04')">Save</a>

这个想法是,如果他们使用鼠标点击链接,那么他们可以继续使用鼠标来选择下一步要做什么。但是,如果他们在页面上切换并切换到“保存”链接,那么我将打开下一行进行编辑(该页面就像一个电子表格,每一行都可以使用 ajax 进行编辑)。

我以为可以通过事件参数来查询按下了哪个鼠标按钮,但是当没有按下任何按钮时,答案是 0,这与鼠标左键相同。我以为我可以从事件中获取 keyCode,但返回时未定义,所以我假设鼠标事件不包含该信息。

function submitData(event, id)
{
    alert("key = "+event.keyCode + "  mouse button = "+event.button);
}

始终返回“键 = 未定义的鼠标按钮 = 0”

你能帮我吗?


可以检查是否event.screenX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX and event.screenY为零。

$('a#foo').click(function(evt) {
  if (evt.screenX == 0 && evt.screenY == 0) {
    window.alert('Keyboard click.');
  } else {
    window.alert('Mouse click.');
  }
});

CodePen 上的演示 http://codepen.io/wernight/pen/dGmBxq?editors=1011

我无法保证它适用于所有浏览器和所有情况,但它的好处是不尝试检测通过键盘完成的“点击”。所以这个解决方案更可靠地检测“点击”,但代价是检测它是否来自键盘或鼠标,可靠性稍差。如果您更喜欢reverse,看成来自@Gonzalo 的回答 https://stackoverflow.com/a/7465044/167897.

注意:我发现使用这种方法的一个地方是Chromium https://chromium.googlesource.com/chromium/reference_builds/chrome_linux/+/3c1359e615f07b066b00fa5eb0f7dfe65276578b%5E!/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

区分鼠标和键盘触发onclick 的相关文章

  • Three.js - 如何翻译几何图形

    我有一个脚本 可以定位各种宽度 高度和深度的立方体 并且正在努力根据 xAxis yAxis 和 zAxis 也有所不同 将它们准确地排列起来 var geometry new THREE BoxGeometry width height
  • 获取所有按钮标签类型

    有没有办法使用 javascript 获取特定页面上的所有按钮标签及其类型 将此代码放在文档的加载事件中或 HTML 的底部 var buttons document getElementsByTagName button for let
  • 使用Puppeteer拦截请求时如何获取原始编码响应大小?

    我使用此代码来记录在 Chrome 中加载页面时编码的响应大小 const puppeteer require puppeteer async function const browser await puppeteer launch co
  • 使 div 更大并在悬停时向上动画更大的部分

    当用户将鼠标悬停在 div 上时 我试图将 div 向上设置动画 我可以对 div 进行动画处理 使其变大 但动画是向下发生的 我试图将 div 的底部保持在同一位置 并平滑地向上增加 div 的大小 请参阅 jsfiddle 这里 htt
  • 在 mdn web 文档中 Element.querySelector 方法说它应该是后代,但示例显示不然

    我正在从 MDN 网络文档学习 JavaScript 我刚刚在学习Element querySelector method 据记载 它返回第一个元素 该元素是调用它的元素的后代 并且与指定的选择器组匹配 但有一个例子与这个事实相矛盾 var
  • Twitter-Typeahead 不提供建议

    我正在尝试使用twitter typeahead rails 我的目的是当我在 Typeahead 输入框中键入内容时 通过下拉框建议模型 User 的实例 但是 当我打字时什么也没有发生 有人看到我的代码有什么问题吗 Gemfile ge
  • 如何在警报或确认框中显示粗体文本?

    如何获取粗体文本并更改警报或确认框中文本的颜色 var conFrm confirm Following List s already Sent n strong List Name strong ss replace n b Name b
  • 将美元金额动态转换为文本以包含“美元”和“美分”一词

    我需要将输入字段中输入的美元金额动态转换为文本 我能找到的最接近的解决方案几乎可以满足我的需求 但是 我希望结果文本包含 美元 一词 并删除句子末尾带有 美分 的 点 一词 这是起始原型和当前结果 function amountToWord
  • 如何确定输入的模式是“Int,VarChar,Date,Time ...”等

    我有一个下拉菜单 其中包含DataType 和一个文本框 这是用于输入的Regex Pattern 如果我进入 test 在文本框中 或从下拉菜单中选择Int 如果在文本框中输入 则其模式是错误的 0 9 那么它的correct patte
  • 如何最高效地更新MongoDB中的大量文档?

    我想要最有效地更新大量 gt 100 000 文档 我的第一个天真的方法是在 JS 级别上进行 编写脚本 首先获取 ids 然后循环 ids 并通过 id 调用更新 完整 文档或 set 补丁 我遇到了内存问题 还将数据分成了最大块 500
  • Chrome 扩展 - 使用 javascript 定期运行并永久记录数据

    目前 我有一个脚本 当单击右上角托盘中的图像 仅适用于一个特定允许的网站 时 它会扫描 HTML 页面 然后输出一些值 此扫描和输出是单个 JS 文件中的函数 称为 checkData js 即使用户没有主动使用选项卡但它已打开 是否有可能
  • 窗口位置替换 - 超时帮助? JavaScript问题

    我曾尝试找到一种方法 在我的代码中添加超时 然后再重定向您 我用谷歌搜索并找到了一些帮助 但他们都没有达到我的预期 这会提示用户出生年份并计算年龄 大致 如果用户未满18岁 则带他们去迪士尼乐园 否则允许进入 函数年龄按钮 var AskD
  • 从字符串中提取所有链接

    我有一个 javascript 变量 其中包含页面的 HTML 源代码 不是当前页面的源代码 我需要从该变量中提取所有链接 关于什么是最好的方法的任何线索 是否可以为变量中的 HTML 创建一个 DOM 然后遍历它 我不知道这是否是推荐的方
  • 从字符串渲染 React 组件

    我在字符串中有一些 React 代码 例如 const component function App return div test div 我希望能够从浏览器内渲染该组件 例如 import React Component from re
  • 从 Angularjs 应用程序中的 iOS Webview 调用 Javascript 函数

    我的问题是 当我尝试从 UIWebView 中调用 AngularJS 应用程序中存在的 javascript 函数时 该函数无法识别 当我在典型的 html 结构中调用该函数时 该函数会按预期被识别 下面提供的示例 目标 C void v
  • javascript 中的独立括号[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 为什么使用匿名函数包装器 https stackoverflow com questions 1643321 javascript why the anonymous funct
  • JavaScript 使用多少位来表示数字?

    JavaScript 使用多少位来表示数字 一般JS实现使用64位双精度浮点数 对 32 位整数执行按位运算
  • Object.assign 方法不绑定“this”

    我正在尝试绑定this变量到一个新对象 function Parent sub component constructors this components node function this name jordan subcompone
  • 创建一个跨浏览器 mixin 进行转换:旋转

    我想为 sass 创建一个 mixin 它将对指定元素应用旋转 mixin 应采用一个参数 表示要应用的旋转度数 从 css3please com 我找到了一种使用 CSS 实现此功能的跨浏览器方法 box rotate moz trans
  • 什么是 Service Worker 控制台? & 它在 Chrome 浏览器中的什么位置?

    我正在研究推送通知并遇到一个陌生的术语 service worker console 我已阅读并使用过该术语console log or web console在浏览器中 但我不熟悉这个术语service worker console 之后

随机推荐

  • Symfony2表单类型实体添加额外选项

    我有以下 Symfony 表单字段 它是从实体加载的下拉列表 gt add measureunit entity array label gt Measure Unit class gt TeamERPBaseBundle MeasureU
  • Python正则表达式替换

    嘿 我正在尝试找出一个正则表达式来执行以下操作 这是我的字符串 Place 08 09 2010 15 531 2 909 650 我需要用逗号分隔该字符串 尽管由于数字数据字段中使用了逗号 但分割无法正常工作 所以我想在运行分割字符串之前
  • 处理和解决“网络使用过多(后台)”的正确方法

    问题背景 当前 我们面临 网络使用过多 背景 来自 Android Vital 报告 最后30天是0 04 但我们只是好于 9 过去 30 天 0 04 基准 优于 9 由于仅好于9 看起来像是一件可怕的事情 我们决定认真研究这个问题 该应
  • 如何在 x86_64 上准确地衡量未对齐访问速度?

    In 一个答案 https stackoverflow com questions 45116212 are packed structs portable 45116730 45116730 我已经说过 在很长一段时间内 未对齐访问的速度
  • 如何始终返回index.html Tomcat

    我有一个在 Tomcat 上运行的 Angular 应用程序 但由于我已经实现了路由 如果我手动访问一个 url 我会得到一个404未找到 另外 当发生错误时 它是一个基本的服务器页面 而不是我的错误 url 页面 如何配置 Tomcat
  • 引用表达式早期部分的匹配项的正则表达式

    我正在寻找一个正则表达式 它将标识一个序列 其中文本中的整数指定表达式末尾的尾随字母数 该具体示例适用于识别堆积格式的遗传数据中的插入和删除 例如 如果我正在搜索的文本是 AtT 3ACGTTT 1AaTTa 我需要匹配插入和删除 在本例中
  • 如何在客户端启动桌面应用程序

    在我的网页中 我必须在客户端计算机上启动桌面应用程序 如果已安装 知道我该怎么做吗 如果应用程序是 MS Office 或 Adob e Reader 我知道如何启动它们 但我要启动的应用程序是自定义应用程序 您无法在互联网上找到它 我如何
  • 如何使注册的符号不显示下划线?

    我遇到了问题 无法显示带有下划线的单词的一部分和没有下划线的单词的一部分 我希望 已注册 符号没有下划线 HTML h3 Basecamp span class sup reg span h3 CSS h3 font size 21px c
  • Rails:如果变量存在,则为输入字段设置一个值

    当 id 传递到控制器中的新操作时 我尝试为两个文本字段输入设置一个值 当前的代码可以工作 但我想知道是否可以缩短代码 当前代码 View div class custom input div
  • GStreamer 上的“列入黑名单”是什么意思?

    我正在尝试交叉编译 GStreamer 版本是1 2 3 主机PC的操作系统是x86 linux 目标系统的操作系统是MIPSEL linux操作系统 我成功为目标设备编译了 gstreamer 和插件 和gst launch 1 0可以被
  • 如何在 OnResponse 函数之外使用 Retrofit 响应?

    我想获取改造响应列表并在 OnResponse 函数之外使用它 但是当我尝试这样做时 我总是得到一个空对象 这是我的源代码 ApiInterface apiService ApiClient getClient create ApiInte
  • 为什么 Visual Studio Code 不断更改工作目录?

    我正在尝试使用 VS Code 来完成 Flask Web 开发 一书 我可以从命令行运行简单的 hello world 示例 但我想使用 VS 代码进行调试等 我修改 launch json 文件来构建 Flask 配置 name Fla
  • 企业库4数据配置标签

    我正在使用企业库来访问数据 当我运行应用程序时 在 CreateDatabase 语句中我收到此异常 Microsoft Practices ObjectBuilder2 BuildFailedException 未被用户代码处理 Mess
  • 在 Android 中从一个 Activity 移动到另一个 Activity

    我想从一项活动转移到另一项活动 使用虚拟设备 当我单击按钮移动时 我的模拟器会显示一个对话框unfortunately SMS1 has stopped working SMS1 是我的应用程序名称 有人可以帮助我纠正我的代码吗 MainA
  • & 符号使我无法使用 jQuery 加载 XML

    我在 XML 文档中显示描述 然后使用 jQuery 将其加载到应用程序中 当我尝试使用 时 它会破坏代码的加载 我也尝试过 38 它也不起作用 是否有解决方法可以让我在 XML 中包含 符号 编辑 结构是
  • ResultSet.getTimestamp("日期") 与 ResultSet.getTimestamp("日期", Calendar.getInstance(tz))

    java util Date java util Timetamp似乎给许多人带来了极大的困惑 StackOverflow 中有很多问题 不幸的是我的问题有点扭曲 有 2 个 JDBC api 他们应该如何表现 RDBMS 之间是否存在一致
  • 如何保存单选按钮状态

    我正在开发Android应用程序 其中我打开自己的自定义对话框 当我选择单选按钮时 我使用单选按钮 毫无疑问它被选中并工作 但是当我再次打开对话框时 所有单选按钮都被取消选择 我想保存上一个按钮的状态 enter code here pri
  • Android AlertDialog 标题字体

    我正在尝试更改字体android support v7 app AlertDialog标题文本 方法一 TextView title TextView dialog findViewById android R id title retur
  • Redux 应用程序中每个减速器调用上深度复制状态有哪些缺点?

    进行深度复制是否有任何副作用state每次调用reducer函数时 在Redux应用程序中的appReducer上 我这么问是因为不可变的更新模式 https redux js org recipes structuring reducer
  • 区分鼠标和键盘触发onclick

    我需要找到一种方法来确定链接是否已通过鼠标单击或按键激活 a href Save a 这个想法是 如果他们使用鼠标点击链接 那么他们可以继续使用鼠标来选择下一步要做什么 但是 如果他们在页面上切换并切换到 保存 链接 那么我将打开下一行进行