Question

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

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

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

修改的

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

Answer 1

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

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

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

现在，简要讨论修复方法：

当你使用没有参数的jQuery的.click()事件时，这实际上并不是对相关元素进行“伪造点击”。相反，根据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的{{1}}对象 - 您可以根据需要更改设置。例如，您可以执行以下操作：

MouseEvents

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

替代的非jQuery解决方案

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

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

（有关更全面的实施，请参阅原始帖子：How can I simulate a click to an anchor tag? - 并查看所选答案）

这实际上会使浏览器误以为您通过以与浏览器默认处理程序相同的方式从头开始构建事件来鼠标单击锚点/ 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

 });

Answer 4

要创建并触发与用户单击相同的click事件：

function simulateClick() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById('checkbox');  //whichever element you want to click
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

当然，可以这样调用函数。

simulateClick();

来源：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

注意：不建议使用initMouseEvent（）。避免使用它，而是使用此解决方案中所示的MouseEvent（）。

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

4 个答案:

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

4 个答案:

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