.click() 和实际单击按钮之间的区别? (JavaScript/jQuery)

2024-01-11

我试图找出我一直遇到的这个奇怪的问题,根本原因是实时点击和触发之间的区别.click().

我不会详细讨论问题的细节,但基本上当您单击输入按钮时它工作正常(有一个onclick事件)。但如果我打电话.click()从其他地方(而不是物理单击按钮)它无法正常工作。

我的问题是 - 有没有办法真正复制按钮的实际点击?


EDIT


在阅读下面讨论如何规避该问题的内容之前,让我更全面地回答您为什么会遇到这个问题:

Modern browsers take different actions for links based on things like which mouse button you clicked with, whether you held Shift / Ctrl / Alt, and so on. As an example, in Chrome, if you middle-click a link instead of left-clicking, the browser will automatically open the window in a new tab.

当你使用.click(),jQuery 必须对您单击的“方式”做出假设 - 并且您会得到默认行为 - 在您的情况下,这不是正确的行为。您需要以以下形式指定浏览器的“正确”设置MouseEvents设置以解决问题。

现在,简短讨论修复它的方法:

当你使用 jQuery 时.click()没有参数的事件,这实际上并不是对相关元素“假装点击”。相反,根据 jQuery 文档http://api.jquery.com/click/ http://api.jquery.com/click/ :

... 什么时候.click()不带参数调用,它是 .trigger("click") 的快捷方式

这意味着当你开火时$('#div1').click()- 如果没有实际的 jQuery 处理程序'click'事件,您将得到默认处理。因此,考虑这两种情况:

Case 1:

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').click();
</script>

在第一个场景中,.click()call 不执行任何操作,因为没有相应的处理程序。事件触发,但没有任何东西可以捕获它并响应 - 所以a使用标签的默认处理,并且用户被带到/some/link/- 由于您没有指定哪个鼠标按钮或任何其他参数 - 它确实是默认值。

Case 2:

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').bind('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        alert('you clicked me!');
    }).click();
</script>

在这种情况下,因为click当用户单击链接时,处理程序被创建 -ev.preventDefault() and ev.stopPropagation()调用将停止发生默认处理,并且将触发警报。

然而此时,你有一个ev代表的对象MouseEvents- 如果您愿意,您可以更改设置。例如,您可以执行以下操作:

ev.altKey = true; // Held Alt
ev.button = 1;    // Middle Mouse Button

这些设置将更改处理事件的默认方法。

替代的非 jQuery 解决方案

您还可以通过调整以下代码来真正模拟按钮单击。

function fakeClick(event, anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser will.
    }
  }
}

(有关更完整的实施,请参阅原始帖子:如何模拟对锚标记的点击? https://stackoverflow.com/questions/1421584/how-can-i-simulate-a-click-to-an-anchor-tag/1421968#1421968- 并查看所选答案)

这实际上会让浏览器相信您通过鼠标单击锚点/跨度/等,以与浏览器的默认处理程序相同的方式从头开始构建事件 - 除了您可以覆盖某些设置。然而,我不建议这种方法,因为它更容易在跨浏览器应用程序上崩溃,并且您必须弄清楚所有参数映射到什么。

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

.click() 和实际单击按钮之间的区别? (JavaScript/jQuery) 的相关文章

  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • 类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)

    我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • C++ 和完全动态函数

    我有走弯路的问题 众所周知 Detours 只能在 5 个字节的空间之间移动 即 jmp 调用和 4 个字节的地址 因此 类 方法 中不可能有 hook 函数 您无法提供 this 指针 因为根本没有足够的空间 here s https s
  • Flask 应用程序无法在 heroku 服务器上启动

    我正在尝试使用 Heroku 部署 Flask 应用程序 这是简单的 API 与 foreman 一起在本地工作得很好 但在 heroku 上启动时出现错误 日志如下 这是我的应用程序代码 我知道它只是在一个块中查找 但我在将其拆分为文件时
  • VB.Net 损坏的字符串 - IDE 错误地将字符串解释为代码

    今天我打开了一个 Visual Basic 项目 其中有几行声明了一些字符串 其中包含逗号分隔的数据 我修改了其中一根字符串 重建并关闭了该项目 当我来测试时 出现了错误 当我查看代码时 我发现我修改的那一行之后的字符串也发生了变化 它们在
  • 使用 URLClassLoader 动态加载 JAR?

    我有一个程序需要能够在运行时动态加载 JAR 环顾四周后我相信它使用了 URLClassLoader 但我不确定如何让它工作 JAR openup jar 与程序位于同一目录中 Ideally我希望能够加载这个 JAR 而不必指定其中的每个
  • 在 Linux 上将 MSword 转换为 XML/HTML

    我需要将 MSWord 文件转换为 XML 或 HTML 同时保留文件的结构 主要是表格 我偶然发现了tika 它在从MSword文件 和任何文件 中提取文本方面非常强大 如下 curl www vit org downloads doc
  • TFS 2017 不构建 Fakes 目标

    我有一个安装了 VS 2017 Enterprise 的 TFS 2017 Update 2 本地服务器 我们的构建包含一个单元测试项目 其中包含一个 Fakes 程序集并在开发计算机上本地工作 在 TFS 上构建时 构建失败并显示 命名空
  • 动态插入 iframe 中的 jQuery .ready

    我们正在使用 jQuerythickbox http jquery com demo thickbox 当有人点击图片时动态显示 iframe 在此 iframe 中 我们使用galleria http devkick com lab ga
  • 更改总计和tax_total Woocommerce

    我使用自定义计算创建自定义结帐页面 我如何无法通过 Ajax 更改总计和tax total 或根据需要刷新页面 我为 ajax 请求创建自定义页面并设置此代码 ss new WC Session Handler ss gt set tax
  • 在 Hibernate 中使用惰性属性

    hibernate 中属性标签的惰性属性允许按照链接延迟加载属性 http docs jboss org hibernate orm 3 3 reference en US html mapping html mapping declara
  • 在 git 命令中的开关之前放置 - 和 -​- [重复]

    这个问题在这里已经有答案了 为什么我们把 在 git 中进行一些切换之前 在其他人之前 有没有任何经验法则可以帮助您记住使用哪一个 这实际上是一个通用的类 Unix 系统功能 在 GNU 应用程序中变得很常见 单破折号选项是 短 选项 双破
  • 使用 lapply 根据旧列创建新列

    我的数据如下 DF lt structure list No Adjusted Gross Income c 183454 241199 249506 NoR from 1 to 5000 c 1035373 4272260 1124098
  • 在 VS 2005 中增量构建

    我们在 VS 2005 中有 50 个项目的解决方案 如果没有任何改变 有什么方法可以进行增量构建吗 它有点像现在就这样做 但它执行每个项目的所有预构建和构建后事件 有什么办法可以预防吗 看看构建活动标签 请注意底部的下拉菜单 上面写着运行
  • 如何为 TEX 创建解析器?

    我正在寻求开发一个 TEX 解析器 现在的问题是没有上下文无关语法 也不可能有 因为它不是上下文无关语言 我听说它是 某种宏语言并且是建立在自己的基础上的 所以现在我需要指导这种宏语言具有什么样的语法以及如何在 C 中构建任何内容 我将编写
  • Spring Webflux 不明时间损失

    我们最近切换到 ExpediaGroups GraphQLlibrary https github com ExpediaGroup graphql kotlin它基于 Spring Webflux Since switching our
  • ics 文件 mime 类型

    我正在尝试将 ics 文件上传到我的网站 它是从 Mac OSX 上的 iCal 导出的 我认为 ics 文件的 mime 类型为text calendar 但由于某种原因 该文件的类型似乎是Application octet stream
  • 实体框架延迟加载的私有支持字段

    我正在使用启用了延迟加载的 Entity Framework 5 我有以下代码 private ICollection
  • 本地时区 鲁比

    需要创建一个 Rails 应用程序 我想在其中获取本地时区的时间 即如果位置是Delhi时区应该是IST如果位置是旧金山时区应该是PDT 如何在 ruby on Rails 中实现这一点 附 一行代码 可以根据位置自动设置时区 尝试这个Ti
  • 可变参数模板的链接器错误

    我有一个带有可变参数模板和辅助函数的程序 include
  • comctl32.msm(合并模块)在 Vista 上失败

    我将 comctl32 msm 卡在安装程序中 comctl32 ocx 合并模块 在 XP 上 comctl32 ocx 出现在 system32 中 一切都很顺利 在vista上 它不起作用 你猜我做错了什么吗 我还尝试用以下内容替换合
  • .click() 和实际单击按钮之间的区别? (JavaScript/jQuery)

    我试图找出我一直遇到的这个奇怪的问题 根本原因是实时点击和触发之间的区别 click 我不会详细讨论问题的细节 但基本上当您单击输入按钮时它工作正常 有一个onclick事件 但如果我打电话 click 从其他地方 而不是物理单击按钮 它无