.click（）和实际点击按钮之间的区别？ （JavaScript的/ jQuery的）

I'm trying to figure out this weird issue I've been having, and the root cause is the difference between a live click and triggering .click().

我试图弄清楚我一直有这个奇怪的问题，根本原因是实时点击和触发.click（）之间的区别。

I won't get into the details of the problem, but basically when you click on the input button it works fine (has an onclick event). But if I call .click() from somewhere else (instead of physically clicking the button) it doesn't work properly.

我不会详细介绍问题，但基本上当你点击输入按钮时它工作正常（有一个onclick事件）。但是，如果我从其他地方调用.click（）（而不是物理点击按钮），它将无法正常工作。

My question is - is there a way to truly replicate an actual click on a button?

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

---

EDIT

编辑

The problem: I'm opening a new window (aspx page) that loads an inline PDF. If I actually click on the link, the window opens fine and the PDF loads. If I use .click() the window opens and I'm prompted to download the PDF file. I've been through Adobe Reader settings, browser settings, and registry settings about the prompting - I understand that these can be factors to the big picture, but right now I'm concerned about why the behavior between a mouse click and .click() are doing anything different at all.

问题：我正在打开一个加载内联PDF的新窗口（aspx页面）。如果我实际点击链接，窗口打开正常，PDF加载。如果我使用.click（），窗口会打开，我会被提示下载PDF文件。我已经通过Adobe Reader设置，浏览器设置和有关提示的注册表设置 - 我知道这些可能是大局的因素，但是现在我关注为什么鼠标点击和.click之间的行为（ ）正在做任何不同的事情。

3 个解决方案

#1

I use this function to truly mimic a mouse click:

我使用此功能真正模仿鼠标点击：

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");
    }
}

#2

Before reading the below, which discusses how to circumvent the problem, let me answer more fully why you're having the problem to begin with:

在阅读下面讨论如何规避问题的内容之前，让我更充分地回答为什么你会遇到问题：

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.

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

When you use .click(), jQuery has to make assumptions about the "way" in which you clicked - and you get defaulted behavior - which in your case, is not the correct behavior. You need to specify the "correct" settings to the browser in the form of MouseEvents settings in order to fix the issue.

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

Now, on to a short discussion of ways to fix it:

现在，简要讨论解决方法：

When you are using jQuery's .click() event with no parameters, this is not actually "faking a click" on the element in question. Instead, according to the jQuery documentation at http://api.jquery.com/click/ :

当您使用没有参数的jQuery的.click（）事件时，这实际上并不是对相关元素进行“伪造”。相反，根据http://api.jquery.com/click/上的jQuery文档：

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

...当没有参数调用.click（）时，它是.trigger（“click”）的快捷方式

This means that when you fire $('#div1').click() - if there is no actual jQuery handler for the 'click' event, you will get default processing. So, consider these two cases:

这意味着当你触发$（'＃div1'）。click（） - 如果'click'事件没有实际的jQuery处理程序，你将获得默认处理。所以，考虑这两种情况：

Case 1:

情况1：

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

In this first scenario, the .click() call does nothing, because there is no handler for it. The event triggers, but there is nothing to catch it and respond - so the a tag's default handling is used, and the user is taken to /some/link/ - and since you haven't specified which mouse button or any other parameters - it's truly default.

在第一个场景中，.click（）调用什么都不做，因为它没有处理程序。事件触发，但没有什么可以捕获并响应 - 因此使用了标签的默认处理，并且用户被带到/ some / link / - 并且因为您没有指定哪个鼠标按钮或任何其他参数 - 这是真正的默认。

Case 2:

案例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>

In this scenario, because a click handler was created, when the user clicks the link - the ev.preventDefault() and ev.stopPropagation() calls will stop the default handling from occuring, and the alert will be fired.

在这种情况下，由于创建了单击处理程序，当用户单击链接时 - ev.preventDefault（）和ev.stopPropagation（）调用将停止发生默认处理，并且将触发警报。

At this point, however, you have an ev object which represents the MouseEvents - and you could change the settings if you desired. For instance, you could do the following:

但是，此时，您有一个代表MouseEvents的ev对象 - 如果需要，您可以更改设置。例如，您可以执行以下操作：

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

These settings will change the default method of handling the event.

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

Alternative, non-jQuery solution

替代的非jQuery解决方案

You can also truly simulate a button-click by adapting the following code.

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

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.
    }
  }
}

(For a more full implementation, see the original post at: How can I simulate a click to an anchor tag? - and look at the selected answer)

（有关更完整的实现，请参阅以下原始帖子：如何模拟单击锚点标记？ - 并查看所选答案）

This will actually fake the browser into believing that you mouse-clicked the anchor / span / etc by building the event from scratch in the same way that the browser's default handlers do - except that you can override some of the settings. I don't suggest this approach, however, as it's a lot more prone to breaking on cross-browser application and you have to figure out what all of the parameters map to.

这实际上会使浏览器误以为您通过从浏览器的默认处理程序执行的方式从头开始构建事件来鼠标单击锚点/ span / etc - 除了您可以覆盖某些设置。但是，我不建议这种方法，因为它更容易打破跨浏览器应用程序，你必须弄清楚所有参数映射到什么。

#3

  $('img').click(function(event){
    console.log(event.hasOwnProperty('originalEvent')); // output : true

  });
  $('img').trigger("click",function(event){
    console.log(event.hasOwnProperty('originalEvent')); // output : false

 });