Mne*_*quo 175 javascript firefox jquery events click
我的JavaScript中有一个计时器,需要模拟点击一个链接,一旦时间流逝就转到另一个页面.要做到这一点,我正在使用jQuery的click()功能.我已经使用$().trigger()和window.location也,我可以作出打算与所有三个它的工作.
我观察到一些奇怪的行为,click()我试图了解发生了什么以及为什么.
我正在使用Firefox来解决这个问题,但我也对其他浏览器会对此做些什么感兴趣.
如果我没有使用$('a').bind('click',fn)或$('a').click(fn)设置事件处理程序,那么调用$('a').click()似乎什么都不做.它不会为此事件调用浏览器的默认处理程序,因为浏览器不会加载新页面.
但是,如果我首先设置一个事件处理程序,那么即使事件处理程序什么都不做,它也会按预期工作.
$('a').click(function(){return true;}).click();
这会加载新页面,就像我自己点击了一样.
所以我的问题是双重的:这种奇怪的行为是因为我在某处做错了吗？click()如果我没有创建自己的处理程序,为什么调用对默认行为不起作用？
编辑:
当霍夫曼确定他试图复制我的结果时,我上面描述的结果实际上并没有发生.我不确定是什么原因引起了我昨天观察到的事件,但我今天肯定这不是我在问题中所描述的.
所以答案是你不能在浏览器中"伪造"点击并且所有jQuery都会调用你的事件处理程序.您仍然可以使用window.location更改页面,这对我来说很好.
Pet*_*ter 241
另一种选择当然是使用vanilla javascript:
document.getElementById("a_link").click()
Hof*_*ann 89
有趣的是,这可能是jQuery的"功能请求"(即bug).如果将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事件的一部分,而是在浏览器中硬编码.
Rya*_*nch 64
如果你查看$.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 IE from throwing an error for some hidden elements
} catch (e) {}
}
在调用处理程序(如果有的话)之后,jQuery会在对象上触发一个事件.但是,如果元素不是链接,它仅调用单击事件的本机处理程序.我想这是出于某种原因有目的地完成的.虽然是否定义了事件处理程序,但这应该是正确的,因此我不确定为什么在您的情况下附加事件处理程序会导致onClick调用本机处理程序.你必须做我做的事情并逐步完成执行以查看它的调用位置.
锚标签上的点击处理程序是jQuery中的一个特例.
我想你可能会在主播的onclick事件(浏览器已知)和jQuery对象的click事件之间感到困惑,它包含了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>
<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>
$(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;
});
});
对于每个链接元素，它：
现在你有一个新的标签/窗口加载"https://google.nl"（或任何你想要的 URL，只需替换它）。不幸的是，当您尝试以这种方式打开多个窗口时，您会Popup blocked在尝试打开第二个窗口时收到一个消息栏（第一个仍然打开）。
有关我如何使用此方法的更多信息，请参见此处：
您可以使用 jQuery 来选择该元素的 jQuery 对象。然后，获取底层 DOM 元素并调用其click()方法。
按 ID：
$("#my-link").each(function (index) { $(this).get(0).click() });
或者使用 jQuery 通过 CSS 类点击一堆链接：
$(".my-link-class").each(function (index) { $(this).get(0).click() });