如何通过 jquery 模拟锚点点击？

https://stackoverflow.com/questions/773639

13-09-2019
|

题

我在通过 jQuery 伪造锚点点击时遇到问题：为什么我的粗框在我第一次单击输入按钮时出现，但第二次或第三次则不出现？

这是我的代码：

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

当我直接单击链接时它总是有效，但如果我尝试通过输入按钮激活厚盒则无效。这是在FF。对于 Chrome 来说，它似乎每次都有效。有什么提示吗？

解决方案

尽量避免像这样内联 jQuery 调用。在页面顶部放置一个脚本标签以绑定到 click 事件：

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

编辑：

如果您尝试模拟用户实际单击链接，那么我认为这是不可能的。解决方法是更新按钮的 click 事件来改变 window.location 在 JavaScript 中：

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

编辑2：

现在我意识到 Thickbox 是一个自定义 jQuery UI 小部件，我找到了说明这里:

指示：

创建一个链接元素（<a href>)
为链接指定一个值为 Thickbox 的类属性 (class="thickbox")
在里面 href 链接的属性添加以下锚点： #TB_inline
在里面 href 后面的属性 #TB_inline 将以下查询字符串添加到锚点：

高度=300&宽度=300&inlineId=myOnPageContent
相应地更改查询中的高度、宽度和 inlineId 值（inlineID 是包含要在 ThickBox 中显示的内容的元素的 ID 值。
您可以选择将 modal=true 添加到查询字符串（例如 #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true），因此关闭 ThickBox 将需要调用 tb_remove() 来自 ThickBox 内的函数。请参阅隐藏的模式内容示例，其中您必须单击“是”或“否”才能关闭 ThickBox。

其他提示

什么工作对我来说是：

$('a.mylink')[0].click()

我最近发现了如何通过jQuery的触发鼠标点击事件。

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

此方法工作在Firefox，铬和IE。希望它可以帮助别人：

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

虽然这是一个非常老的问题，但我发现有一些更容易处理这项任务的方法。它是jquery UI团队开发的jquery插件，名为simulate。你可以将它包含在 jquery 之后，然后你可以做类似的事情

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

在 chrome、firefox、opera 和 IE10 中运行良好。您可以从以下位置下载 https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

在问题的标题说：“我怎么可以模拟在jQuery的锚点击？”。那么，你可以使用“触发”或“triggerHandler”的方法，像这样：

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

没测试过，这个实际的脚本，但我用trigger等人面前，他们的工作a'ight。

<强>更新结果 triggerHandler实际上并没有做OP想要的东西。我想 1421968 提供最好这个问题的答案。

我建议查看 Selenium API，看看它们如何以浏览器兼容的方式触发对元素的点击：

selenium-browserbot.js

寻找 BrowserBot.prototype.triggerMouseEvent 功能。

我相信你可以使用：

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

这将容易引发点击功能，而无需实际点击它。

你需要假锚点击？从ThickBox的网站：

的ThickBox可以从链接元件，输入元件（通常为按钮），并且将面积元件（图像映射）被调用。

如果这是可以接受的，应该作为把ThickBox的类对输入本身一样容易：

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

如果没有，我会建议使用Firebug放置一个断点在锚元素的onclick方法，看看它是否只在第一次点击触发的。

编辑：

好吧，我不得不尝试它为我自己和我差不多正好你的代码在Chrome和Firefox的工作：

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

在窗口弹出窗口不管如果我点击输入或锚固元件。如果上面的代码为你工作，我建议你的错误出在其它地方，并且尝试找出问题。

另一个可能的是，我们使用不同版本的的jquery / ThickBox的。我在用我从ThickBox的页面了 - 。jQuery的1.3.2和3.1 ThickBox的

您可以创建通过jQuery或与模仿你的链接的href诉讼的HTML网页代码的形式：

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

要模拟点击一个锚页面上降落时，我只是用jQuery来的scrollTop的属性动画在$(document).ready.无需复杂的触发器，而在IE 6和其他浏览器。

如果你不需要使用jQuery，因为我不知道。我已经与.click()的跨浏览器的FUNC问题。所以我使用：

eval(document.getElementById('someid').href)

在Javascript中，你可以像这样

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

和可以用它像

submitRequest("target-element-id");

使用法理的剧本我做了这个，很容易，只要你想“点击”的许多元素。结果我只是用它谷歌阅读器上1600+的项目，它完美地工作（在Firefox）！

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

JQuery('#left').triggerHandler('click');在Firefox和IE7细。我还没有测试它在其他浏览器。

如果希望触发自动用户点击执行以下操作：

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

这不会对机器人本地浏览器工作，以点击“隐藏的输入（文件）元素”：

$('a#swaswararedirectlink')[0].click();

但是，这工作的：

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

在试图模拟单元测试与jQuery UI的微调我不能得到任何以前的答案的工作“喀嗒”。特别是，我试图模拟选择向下箭头的“旋转”。我看着 jQuery UI的旋转单元测试和他们使用下面的方法，该方法为我工作：

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow