jQuery программно нажмите тег, который имеет javascript: void (0)

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() не заставит элемент инициировать навигацию, как если бы был получен реальный щелчок мыши.

Таким образом, изменить его с:

$('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's .trigger («click»), потому что jQuery сохраняет ссылку на этот обработчик, когда он изначально добавлен ,

Кроме того, это вызовет JavaScript внутри атрибута onclick.

Функция .trigger() не может использоваться для имитации собственных событий браузера, таких как щелчок на поле ввода файла или якорный тег. Это связано с тем, что обработчик событий не связан с системой событий jQuery, которая соответствует этим событиям.

Answer 2

<a href="javascript:void(0)"> - это взломать, чтобы сделать что-то доступным, но не переместить пользователя на новую страницу. Это никак не связано с вашей функцией масштабирования.

Скорее всего, вы используете какую-то библиотеку или плагин, чтобы сделать масштабируемые изображения. Вы должны прочитать документы и посмотреть, предоставляет ли библиотека возможность программно запускать масштабирование.