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

Question

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

我不会详细介绍问题,但基本上当你点击输入按钮时它工作正常(有一个onclick事件).但是,如果我.click()从其他地方打电话(而不是实际点击按钮),它就无法正常工作.

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

---

编辑

问题:我正在打开一个加载内联PDF的新窗口(aspx页面).如果我实际点击链接,窗口打开正常,PDF加载.如果我.click()打开窗口,系统会提示我下载PDF文件.我一直在阅读有关提示的Adobe Reader设置,浏览器设置和注册表设置 - 我知道这些可能是大局的因素,但是现在我关注为什么鼠标点击和.click之间的行为( )正在做任何不同的事情.

Answer 1

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

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

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

现在,简要讨论解决方法:

当您使用.click()没有参数的jQuery 事件时,这实际上并不是对相关元素进行"伪造".相反,根据http://api.jquery.com/click/上的jQuery文档:

...当.click()没有参数调用时,它是.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()调用将停止发生默认处理,并且将触发警报.

但是,此时,您有一个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.
    }
  }
}

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

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

Answer 2

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

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

Answer 3

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

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

 });