如果我尚未使用 bind 或 click 将事件处理程序绑定到 <a> 链接，我可以调用 jQuery 的 click() 以跟随 <a> 链接吗？

IT技术 javascript jquery firefox events click
2021-01-17 22:39:32

我的 JavaScript 中有一个计时器，一旦时间过去，它需要模拟单击链接以转到另一个页面。为此，我使用了 jQuery 的click()函数。我已经使用了$().trigger()并且window.location，我可以让它在这三个方面都按预期工作。

我观察到了一些奇怪的行为，click()我试图了解会发生什么以及为什么会发生。

我在这个问题中描述的所有内容都使用 Firefox，但我也对其他浏览器将如何处理此问题感兴趣。

如果我没有使用$('a').bind('click',fn)或$('a').click(fn)设置事件处理程序，那么调用$('a').click()似乎什么都不做。它不会为此事件调用浏览器的默认处理程序，因为浏览器不会加载新页面。

但是，如果我先设置一个事件处理程序，那么即使事件处理程序什么都不做，它也会按预期工作。

$('a').click(function(){return true;}).click();

这会加载新页面，就像我自己点击了 a 一样。

所以我的问题是双重的：这是不是因为我在某个地方做错了什么而出现这种奇怪的行为？click()如果我没有创建自己的处理程序，为什么调用对默认行为没有任何作用？

正如霍夫曼在试图复制我的结果时所确定的那样，我上面描述的结果实际上并没有发生。我不确定是什么导致了我昨天观察到的事件，但我今天确定这不是我在问题中所描述的。

所以答案是你不能在浏览器中“伪造”点击，而 jQuery 所做的就是调用你的事件处理程序。您仍然可以使用window.location更改页面，这对我来说很好用。

6个回答

另一种选择当然是只使用 vanilla JavaScript：

document.getElementById("a_link").click()
这在 Safari 中不起作用，根据 HTML 规范，只有输入需要实现这一点。
2021-03-11 22:39:32
在各种浏览器中测试，IE10 & Jquery 1.6.4 不能处理这个。
2021-03-16 22:39:32
哇伤员满了，按我的预期工作。+1 给出:)。对于其他用户，您也可以使用类似： var lnk = document.getElementById("a_link"); if (lnk == null) { //做一些.... } else { lnk.click(); }
2021-03-17 22:39:32
@BGM，好的，但是 click() 不在 jquery 元素上。你可以用 getElementById("..").click() 替换它
2021-04-02 22:39:32
当！这确实有效！但我必须说它不是很“普通”的 javascript，因为它使用的是 jquery 元素，所以它是一种普通的 jquery javascript……它适用于 Firefox 24 和 IE 10。
2021-04-06 22:39:32

有趣的是，这可能是 jQuery 的“功能请求”（即错误）。如果您将 jQuery 事件绑定到元素，则 jQuery 单击事件只会触发元素上的单击操作（在 DOM 上称为 onClick 事件）。你应该去 jQuery 邮件列表 ( http://forum.jquery.com/ ) 并报告这个。这可能是想要的行为，但我不这么认为。

编辑：

我做了一些测试，你说的是错误的，即使你将一个函数绑定到一个 'a' 标签，它仍然不会带你到由 href 属性指定的网站。试试下面的代码：

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   /* Try to dis-comment this:
   $('#a').click(function () {
    alert('jQuery.click()');
    return true;
   });
   */
  });
  function button_onClick() {
   $('#a').click();
  }
  function a_onClick() {
   alert('a_onClick');
  }
 </script>

</head>
<body>
 <input type="button" onclick="button_onClick()">
 <br>
 <a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html>

除非您直接单击链接（无论是否带有注释代码），否则它永远不会转到 google.com。另请注意，即使您将 click 事件绑定到链接，一旦您单击按钮，它仍然不会变为紫色。如果您直接单击链接，它只会变成紫色。

我做了一些研究，似乎 .click 不应该与 'a' 标签一起使用，因为浏览器不支持使用 javascript 的“假点击”。我的意思是，你不能用 javascript“点击”一个元素。使用 'a' 标签，您可以触发其 onClick 事件，但链接不会改变颜色（对于访问过的链接颜色，大多数浏览器中的默认值为紫色）。因此，让 $().click 事件与 'a' 标签一起工作是没有意义的，因为转到 href 属性的行为不是 onClick 事件的一部分，而是硬编码在浏览器中。

事实上，click() 并不是为了创建虚假点击，但有时我们可以用它来点击按钮或带有 javascript 注入的表单，或者只是为了方便，同时在现有的 javascript 函数之上创建一个临时热键。
2021-03-15 22:39:32
我试过你的代码，它和你说的完全一样，但我的代码就像我上面描述的那样。我会做一些更多的实验，看看我是否可以将我的结果放在一个简单的例子中，你可以试试。
2021-04-06 22:39:32
行。一定是我做错了什么。当我发布我的问题时，我绝对确定它正在起作用，但是自从我尝试了您的示例后，我的示例不再起作用。我将返回使用 window.location 来更改页面，而不是尝试伪造点击。
2021-04-07 22:39:32

如果您查看该$.click函数的代码，我敢打赌有一个条件语句会检查元素是否click在继续之前为该事件注册了侦听器。为什么不直接href从链接中获取属性并手动更改页面位置？

 window.location.href = $('a').attr('href');

这就是它不点击的原因。从trigger函数来看，jQuery 源代码为 1.3.2 版：

 // Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
 if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
     event.result = false;

 // Trigger the native events (except for clicks on links)
 if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
     this.triggered = true;
     try {
         elem[ type ]();
         // Prevent Internet Explorer from throwing an error for some hidden elements
     }
     catch (e)
     {
     }
 }

在它调用处理程序（如果有的话）之后，jQuery 在对象上触发一个事件。但是，如果元素不是链接，它只会为单击事件调用本机处理程序。我想这是出于某种原因故意这样做的。无论是否定义了事件处理程序，这都应该是正确的，所以我不确定为什么在您的情况下附加事件处理程序会导致onClick调用本机处理程序。您必须按照我所做的操作并逐步执行执行以查看调用它的位置。

window.location 有效，但不能发布 HTTP Referrer，并打破后退按钮。
2021-03-16 22:39:32
我当然可以使用我在问题中提到的 window.location 和 href 。我试图了解 jquery click() 中发生了什么，以及是什么导致了我观察到的结果。
2021-03-24 22:39:32
我编辑了我的答案以显示它在 jQuery 源中处理链接上的 $.click() 调用的位置。
2021-03-27 22:39:32

锚标记上的单击处理程序是 jQuery 中的一个特例。

我认为您可能会在锚点的 onclick 事件（浏览器已知）和 jQuery 对象的单击事件之间感到困惑，该对象包装了 DOM 的锚点标记的概念。

您可以在此处下载 jQuery 1.3.2 源代码。

源代码的相关部分是第 2643-2645 行（我已将其拆分为多行以使其更易于理解）：

// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
     (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && 
       elem["on"+type] && 
       elem["on"+type].apply( elem, data ) === false
   )
     event.result = false;

JavaScript/jQuery 不支持以编程方式“点击”链接的默认行为。

相反，您可以创建一个表单并提交它。这样您就不必使用window.location或window.open，它们通常被浏览器阻止为不需要的弹出窗口。

该脚本有两种不同的方法：一种尝试打开三个新选项卡/窗口（它只在 Internet Explorer 和 Chrome 中打开一个，更多信息如下），另一种在链接点击时触发自定义事件。

方法如下：

HTML

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>

<body>
    <button id="testbtn">Test</button><br><br>

    <a href="https://google.nl">Google</a><br>
    <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br>
    <a href="https://stackoverflow.com/">Stack Overflow</a>
</body>

</html>

jQuery（文件script.js）

$(function()
{
    // Try to open all three links by pressing the button
    // - Firefox opens all three links
    // - Chrome only opens one of them without a popup warning
    // - Internet Explorer only opens one of them WITH a popup warning
    $("#testbtn").on("click", function()
    {
        $("a").each(function()
        {
            var form = $("<form></form>");
            form.attr(
            {
                id     : "formform",
                action : $(this).attr("href"),
                method : "GET",
                // Open in new window/tab
                target : "_blank"
            });

            $("body").append(form);
            $("#formform").submit();
            $("#formform").remove();
        });
    });

    // Or click the link and fire a custom event
    // (open your own window without following 
    // the link itself)
    $("a").on("click", function()
    {
        var form = $("<form></form>");
        form.attr(
        {
            id     : "formform",
            // The location given in the link itself
            action : $(this).attr("href"),
            method : "GET",
            // Open in new window/tab
            target : "_blank"
        });

        $("body").append(form);
        $("#formform").submit();
        $("#formform").remove();

        // Prevent the link from opening normally
        return false;
    });
});

对于每个链接元素，它：

  1. 创建表单
  2. 赋予它属性
  3. 将其附加到 DOM 以便提交
  4. 提交
  5. 从 DOM 中移除表单，移除所有痕迹 *插入邪恶的笑声*

现在你有一个新的标签/窗口加载"https://google.nl"（或任何你想要的 URL，只需替换它）。不幸的是，当您尝试以这种方式打开多个窗口时，您会Popup blocked在尝试打开第二个窗口时收到一个消息栏（第一个仍然打开）。

有关我如何使用此方法的更多信息，请参见此处：

其它你可能感兴趣的问题
上一篇如何以编程方式单击带有 javascript 的链接？ 下一篇什么时候应该使用内联和外部 Javascript？