Question

我正尝试以编程方式在页面上单击“放大”图标三次。 <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);
    }
}

我收到循环有效的警报，但缩放功能无效，不确定如何修复或更好的方法来解决这个问题？

Answer 1

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

而是使用HTMLElement.click()：

HTMLElement.click（）方法模拟鼠标单击元素。

当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>

More reading：

jQuery的事件处理系统是一个基于本机浏览器事件的层。当使用.on（“click”，function（）{...}）添加事件处理程序时，可以使用jQuery的.trigger（“click”）触发它，因为jQuery在最初添加时会存储对该处理程序的引用。

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

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

Answer 2

<a href="javascript:void(0)">是一种用于制作可点击内容的黑客，但不会将用户移动到新页面。它与您的缩放功能无关。

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

jQuery以编程方式单击具有javascript的标记：void（0）

2 个答案: