3

我正在尝试以编程方式在页面上单击三次“放大”图标。<a>结构如下：

<a class="get-plus" title="zoom in" href="javascript:void(0)" style="display: inherit;">&nbsp;</a>

我有以下代码，在准备好文档时调用：

function zoomIn() {
    // Zoom in 
    for (var i = 0; i < 3; i++) {
        $('a.get-plus').trigger('click');
        alert(i);
    }
}

我收到循环工作的警报，但缩放功能不起作用，不知道如何修复或更好的方法来解决这个问题？

4

2 回答 2

3

您触发点击事件的方式不起作用。

而是使用HTMLElement.click()：

HTMLElement.click() 方法模拟鼠标单击元素。

当 click() 与支持的元素（例如其中一种类型）一起使用时，它会触发元素的单击事件。然后，此事件会冒泡到文档树（或事件链）中更高的元素并触发它们的单击事件。一个例外：click() 方法不会使元素启动导航，就像收到真正的鼠标点击一样。

因此，将其更改为：

$('a.get-plus').trigger('click');

至：

$('a.get-plus').get(0).click();

这个例子：

function zoomInChanged() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      $('a.get-plus').get(0).click();
    }, i * 1000);
  }
}

function zoomIn() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    $('a.get-plus').trigger('click');
    console.log(i);
  }
}

console.log('zoomIn:');
zoomIn();
console.log('zoomInChanged:');
zoomInChanged();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="get-plus" title="zoom in" href="javascript:console.log('Clicked')" style="display: inherit;">&nbsp;</a>

更多阅读：

jQuery 的事件处理系统是原生浏览器事件之上的一层。当使用 .on( "click", function() {...} ) 添加事件处理程序时，可以使用 jQuery 的 .trigger( "click" ) 触发它，因为 jQuery 在最初添加时存储了对该处理程序的引用.

此外，它将触发 onclick 属性内的 JavaScript。

.trigger() 函数不能用于模拟原生浏览器事件，例如单击文件输入框或锚标记。这是因为，没有使用与这些事件对应的 jQuery 事件系统附加事件处理程序。

于 2017-01-06T21:28:32.020 回答
0

<a href="javascript:void(0)">是一种 hack，用于使某些内容可点击，但不会将用户移动到新页面。它与您的缩放功能没有任何关系。

您很可能使用某种库或插件来使图像可缩放。您应该阅读文档，看看您的库是否提供了一种以编程方式触发缩放的方法。

于 2017-01-06T21:25:02.887 回答