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

Question

我正在尝试解决我一直遇到的这个奇怪问题，其根本原因是实时点击和触发 .click() 之间的差异.

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

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

<小时/>

编辑

问题:我正在打开一个新窗口(aspx 页面)来加载内联 PDF。 如果我真的点击链接，窗口会正常打开并加载 PDF。如果我使用 .click()，则会打开窗口，并提示我下载 PDF 文件。我已经完成了有关提示的 Adob​​e Reader 设置、浏览器设置和注册表设置- 我知道这些可能是影响全局的因素，但现在我担心为什么鼠标单击和 .click() 之间的行为完全不同。

Answer 1

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

现代浏览器根据您单击的鼠标按钮、是否按住 Shift/Ctrl/Alt 等因素对链接采取不同的操作， 等等。例如，在 Chrome 中，如果您中键单击链接而不是左键单击，浏览器将自动在新选项卡中打开窗口。

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

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

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

... when .click() is called without arguments, it is a shortcut for .trigger("click")

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

情况1:

<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() 调用将停止发生默认处理，并且将触发警报。

但是，此时您已经有了一个代表 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.
    }
  }
}

(有关更完整的实现，请参阅原始帖子:How can I simulate a click to an anchor tag? - 并查看所选答案)

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