.click()和实际点击按钮之间的区别? (JavaScript的/ jQuery的)
我试图弄清楚我一直有这个奇怪的问题,根本原因是实时点击和触发.click()
之间的区别 。
我不会详细介绍问题,但基本上当你点击输入按钮时它工作正常(有一个onclick
事件)。 但是,如果我从其他地方调用.click()
(而不是物理点击按钮),它将无法正常工作。
我的问题是 – 有没有办法真正复制按钮上的实际点击?
编辑
问题:我正在打开一个加载内联PDF的新窗口(aspx页面)。 如果我实际点击链接,窗口打开正常,PDF加载。 如果我使用.click()
,窗口会打开,我会被提示下载PDF文件。 我已经通过Adobe Reader设置,浏览器设置和有关提示的注册表设置 – 我知道这些可能是大局的因素,但是现在我关注为什么鼠标点击和.click之间的行为( )正在做任何不同的事情。
我使用此function真正模仿鼠标点击:
function clickLink(link) { var cancelled = false; if (document.createEvent) { var event = document.createEvent("MouseEvents"); event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); cancelled = !link.dispatchEvent(event); } else if (link.fireEvent) { cancelled = !link.fireEvent("onclick"); } }
在阅读下面讨论如何规避问题的内容之前,让我更充分地回答为什么你会遇到问题:
现代浏览器根据您点击的鼠标按钮,是否按住Shift / Ctrl / Alt等等,对链接采取不同的操作。 例如,在Chrome中,如果您中间单击某个链接而不是左键单击,则浏览器将自动在新选项卡中打开该窗口。
当你使用.click()
,jQuery必须对你点击的“方式”做出假设 – 你会得到默认行为 – 在你的情况下,这不是正确的行为。 您需要以MouseEvents
设置的forms为浏览器指定“正确”设置才能解决问题。
现在,简要讨论解决方法:
当您使用没有参数的jQuery的.click()
事件时,这实际上并不是对相关元素进行“伪造”。 相反,根据http://api.jquery.com/click/上的jQuery文档:
…当没有参数调用.click()时,它是.trigger(“click”)的快捷方式
这意味着当你触发$('#div1').click()
– 如果'click'
事件没有实际的jQuery处理程序,你将获得默认处理。 所以,考虑这两种情况:
案例1 :
Click me!
在第一个场景中, .click()
调用什么都不做,因为它没有处理程序。 事件触发,但没有什么可以捕获并响应 – 因此使用a
标签的默认处理,并且用户被带到https://stackoverflow.com/some/link/
– 并且因为您没有指定哪个鼠标按钮或任何其他参数 -这是真正的默认。
案例2 :
Click me!
在这种情况下,由于创建了click
处理程序,当用户单击链接时 – ev.preventDefault()
和ev.stopPropagation()
调用将停止发生默认处理,并且将触发警报。
但是,此时,您有一个代表MouseEvents
的ev
对象 – 如果需要,您可以更改设置。 例如,您可以执行以下操作:
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. } } }
(有关更完整的实现,请参阅以下原始post: 如何模拟单击锚点标记? – 并查看所选答案)
这实际上会使浏览器误以为您通过从浏览器的默认处理程序执行的方式从头开始构建事件来鼠标单击锚点/ span / etc – 除了您可以覆盖某些设置。 但是,我不建议这种方法,因为它更容易打破跨浏览器应用程序,你必须弄清楚所有参数映射到什么。
$('img').click(function(event){ console.log(event.hasOwnProperty('originalEvent')); // output : true }); $('img').trigger("click",function(event){ console.log(event.hasOwnProperty('originalEvent')); // output : false });