简体   繁体   English

为什么我不能在jQuery中单击()链接?

[英]Why can't I click() links in jQuery?

I came across a curiosity in jQuery: if I call .click() on a link the click event handlers are called, but the link isn't actually followed (as if it were clicked in the browser): 我在jQuery中遇到了一个好奇心:如果我在链接上调用.click() ,则会调用click事件处理程序,但实际上并未跟踪该链接(就好像它在浏览器中被单击一样):

<a id="link" href="http://www.google.com>Link</a>

$("#link").click() // won't take me to Google

But in plain Javascript, everything behaves as expected: 但是在普通的Javascript中,一切都按预期运行:

document.getElementById("link").click() // *will* take me to Google

This is apparently intentional behaviour - but I'm struggling to work out why click was implemented like this - with a special exception for links? 这显然是故意的行为 - 但我正在努力解决为什么click是这样实现的 - 链接的特殊例外?

Fiddle here: http://jsfiddle.net/9a6sp/ 在这里小提琴: http//jsfiddle.net/9a6sp/

To clarify: I'm not asking how to click link in JS, but rather, why the default behaviour in jQuery is effectively that links aren't clicked when you call .click() 澄清:我不是问如何点击JS中的链接,而是为什么jQuery中的默认行为实际上是在调用.click()没有点击链接

domelement.click() isn't supported cross browser for redirecting. 不支持使用domelement.click()跨浏览器进行重定向。 If you need to redirect to the location in a link you can use: 如果您需要重定向到链接中的位置,您可以使用:

window.location = $('#link').prop('href');

jQuery.click() is meant to bind a click handler to an element. jQuery.click()用于将单击处理程序绑定到元素。 However it can be used to trigger a click() event bound using jQuery. 但是它可以用于触发使用jQuery绑定的click()事件。

jQuery.trigger() will trigger a bound event handler, such as $(someElement).trigger("click"); jQuery.trigger()将触发绑定事件处理程序,例如$(someElement).trigger("click");

If you wanted to trigger a link in jQuery may I suggest the following. 如果你想在jQuery中触发一个链接,我可以建议如下。

$(someelement).click(function () {
  window.location = $(link).attr("href");
});

Maybe this is what you are looking for? 也许这就是你要找的? First, you need to attach a click event. 首先,您需要附加点击事件。 then you can use trigger to fire it. 然后你可以使用触发器来触发它。

<html>
<head title="jQuery Test">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#blah').click(function () {
                alert('clicked');
            });
            $('#blah').trigger('click');
        });
    </script>
</head>
<body>
    <a id="blah" href="#">BLAH</a>
</body>
</html>

For why this isn't work, in jsFiddle $('#link') doesn't select the anchor in html, and click() fails. 为什么这不起作用,在jsFiddle $('#link')中没有选择html中的锚点,而click()失败。 Even the type selector $('a').href fails. 甚至类型选择器$('a').href也会失败。

http://jsfiddle.net/yangchenyun/L9EUS/ http://jsfiddle.net/yangchenyun/L9EUS/

The code works in normal browser. 该代码适用于普通浏览器。 I have tested the code on stackoverflow.com with this code jQuery('a').eq(1).click() in chrome concole, it triggers the click() on the logo. 我已经使用此代码jQuery('a').eq(1).click()在chrome concole中的jQuery('a').eq(1).click() .click jQuery('a').eq(1).click()测试了stackoverflow.com上的代码,它触发了徽标上的click()

So in conclusion , click() links work in jQuery(). 总而言之 ,click()链接在jQuery()中工作。 jsfiddle.net has interrupts the normal jQuery function. jsfiddle.net中断了正常的jQuery函数。

I'm just guessing as to why the jQuery team chose to implement things this way, since I'm not on the jQuery team, but the navigation aspect of an anchor tag can be triggered by other UI behaviors than just clicking with the mouse. 我只是猜测为什么 jQuery团队选择以这种方式实现,因为我不是在jQuery团队,但是锚标签的导航方面可以由其他UI行为触发,而不仅仅是用鼠标点击。 For example in plain old javascript, using the keyboard to activate an element doesn't trigger the onClick action, but it will trigger the navigation action of an anchor tag. 例如,在普通的旧javascript中,使用键盘激活元素不会触发onClick操作,但它触发锚标记的导航操作。

In other words, by clicking on a link you're just using one of several possible mechanisms for navigating to the referenced endpoint, but the navigation and the click aren't the same event, so jQuery chose to treat the click just that. 换句话说,通过单击链接,您只是使用几种可能的机制之一导航到引用的端点,但导航和单击不是同一事件,因此jQuery选择仅处理点击。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM