在阅读以下讨论如何规避问题的内容之前,让我更全面地回答您开始遇到问题的原因:
现代浏览器根据您单击的鼠标按钮、是否按住Shift/ Ctrl/等内容对链接采取不同的操作Alt。例如,在 Chrome 中,如果您单击中间链接而不是左键单击,浏览器将自动在新选项卡中打开窗口。
当您使用 时.click()
,jQuery 必须对您单击的“方式”做出假设 - 并且您会获得默认行为 - 在您的情况下,这不是正确的行为。您需要以设置的形式向浏览器指定“正确”的MouseEvents
设置才能解决问题。
现在,对修复它的方法进行简短讨论:
当您使用.click()
不带参数的jQuery事件时,这实际上并不是对相关元素进行“假点击”。相反,根据http://api.jquery.com/click/上的 jQuery 文档:
...当.click()
不带参数调用时,它是 .trigger("click") 的快捷方式
这意味着当您触发时$('#div1').click()
- 如果该'click'
事件没有实际的 jQuery 处理程序,您将获得默认处理。因此,请考虑以下两种情况:
案例一:
<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
$('#myLink').click();
</script>
在第一个场景中,.click()
调用什么都不做,因为它没有处理程序。事件触发,但没有任何东西可以捕获它并做出响应——所以使用了a
标签的默认处理,并且用户被带到/some/link/
——而且由于你没有指定哪个鼠标按钮或任何其他参数——它是真正的默认值。
案例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()
和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.
}
}
}
(有关更完整的实现,请参阅原始帖子:如何模拟对锚标记的点击? - 并查看所选答案)
这实际上会使浏览器相信您通过以与浏览器的默认处理程序相同的方式从头开始构建事件来相信您用鼠标单击了锚点/跨度等 - 除了您可以覆盖某些设置。但是,我不建议使用这种方法,因为它更容易破坏跨浏览器应用程序,您必须弄清楚所有参数映射到什么。