Могу ли я вызвать jquery click(), чтобы перейти к ссылке <a>если я не привязал обработчик события к нему со связью или кликом уже?

У меня есть таймер в моем JavaScript, который должен эмулировать щелчок по ссылке, чтобы перейти на другую страницу по истечении времени. Для этого я использую функцию jQuery click(). Я также использовал $().trigger() и window.location, и я могу заставить его работать по назначению со всеми тремя.

Я наблюдал какое-то странное поведение с click(), и я пытаюсь понять, что происходит и почему.

Я использую Firefox для всего, что я описываю в этом вопросе, но меня также интересует, что другие браузеры будут делать с этим.

Если я не использовал $('a').bind('click',fn) или $('a').click(fn) для установки обработчика событий, то вызов $('a').click() кажется вообще недействительным. Он не вызывает обработчик по умолчанию для браузера для этого события, так как браузер не загружает новую страницу.

Однако, если я сначала устанавливаю обработчик событий, он работает так, как ожидалось, даже если обработчик событий ничего не делает.

$('a').click(function(){return true;}).click();

Это загружает новую страницу, как если бы я щелкнул сам.

Итак, мой вопрос двоякий: это странное поведение, потому что я что-то делаю неправильно? и почему вызов click() ничего не делает с поведением по умолчанию, если я не создал обработчик моего собственного?

EDIT:

Как выяснил Хоффман, когда он пытался дублировать мои результаты, результат, описанный выше, на самом деле не происходит. Я не уверен, что вызвало события, которые я наблюдал вчера, но сегодня я уверен, что это не то, что я описал в вопросе.

Итак, ответ заключается в том, что вы не можете "подделывать" клики в браузере и что все jQuery - это вызов обработчика событий. Вы можете использовать window.location для изменения страницы, и это отлично работает для меня.

Ответы

Ответ 1

Интересно, что это, вероятно, "запрос функции" (т.е. ошибка) для jQuery. Событие кликов jQuery запускает действие элемента click (событие onClick на DOM) элемента, если вы привязываете событие jQuery к элементу. Вы должны перейти в списки рассылки jQuery (http://forum.jquery.com/) и сообщить об этом. Это может быть желаемое поведение, но я так не думаю.

EDIT:

Я провел некоторое тестирование, и то, что вы сказали, неверно, даже если вы привязываете функцию к тегу '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. Я имею в виду, вы не можете "click" элемент с javascript. С помощью тегов "a" вы можете инициировать событие onClick, но ссылка не изменит цвета (к цвету посещенных ссылок, по умолчанию в большинстве браузеров фиолетовый). Таким образом, было бы нецелесообразно сделать операцию $(). Click event работать с тегами 'a', поскольку действие перехода к атрибуту href не является частью события onClick, а жестко закодировано в браузере.

Ответ 2

Другим вариантом является, конечно, просто использовать vanilla javascript:

document.getElementById("a_link").click()

Ответ 3

Если вы посмотрите на код для функции $.click, я готов поспорить, что существует условная инструкция, которая проверяет, имеет ли элемент прослушивание зарегистрированных для события click, прежде чем оно будет продолжено. Почему бы просто не получить атрибут href из ссылки и вручную изменить местоположение страницы?

 window.location.href = $('a').attr('href');

EDIT: вот почему он не щелкает через функцию 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 запускает событие на объекте. Однако он вызывает вызовы только для обработчиков щелчков, если элемент не является ссылкой. Я думаю, это было сделано целенаправленно по какой-то причине. Это должно быть правдой, если определен какой-либо обработчик события или нет, поэтому я не уверен, почему в вашем случае привязка обработчика события вызвала вызов обработчика native onClick. Вам нужно будет сделать то, что я сделал, и выполнить выполнение, чтобы увидеть, где он вызывается.

Ответ 4

Обработчики кликов на якорных тегах являются особым случаем в jQuery.

Я думаю, что вы можете запутаться между якорем onclick-событием (известным браузером) и событием click объекта jQuery, который обертывает представление 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;

Ответ 5

Запустите элемент гиперссылки, который находится внутри элемента, который вы хотите подключить jquery.click()

<div class="TopicControl">
    <div class="articleImage">
       <a href=""><img src="" alt=""></a>
    </div>
</div>

В script вы подключаетесь к основному контейнеру, в который вы хотите включить событие click. Затем вы используете стандартную методологию jquery, чтобы найти элемент (тип, класс, идентификатор) и запустить клик. Случается, что jquery вводит рекурсивную функцию для запуска щелчка, и вы прерываете рекурсивную функцию, перебирая функцию "e" и stopPropagation() и возвращаете false, потому что вы не хотите, чтобы jquery выполнял что-либо еще, кроме как запустить ссылку.

$('.TopicControl').click(function (event) {
         $(this).find('a').click();
        event.stopPropagation();
        return false;
     });

Альтернативное решение состоит в том, чтобы обернуть контейнеры в элемент и разместить в качестве контейнеров внутри вместо 's. Установите промежутки для отображения блока в соответствии со стандартами w3c.

Ответ 6

JS/jQuery не поддерживает поведение по умолчанию ссылок "щелкнуло" программно.

Что вы можете сделать, это создать форму и отправить ее. Таким образом, вам не нужно использовать window.location или window.open, которые часто блокируются как нежелательные всплывающие окна браузерами.

Этот script имеет 2 разных метода: один, который пытается открыть 3 новых вкладки/окна (он открывается только 1 в IE и Chrome, подробнее см. ниже) и тот, который запускает настраиваемое событие при нажатии ссылки.

Вот как:

HTML

<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">WIKI</a><br>
    <a href="https://stackoverflow.com/">SO</a>
</body>
</html>

jQuery (script.js)

$(function()
{ 
    // Try to open all 3 links by pressing the button
    // - Firefox opens all 3 links
    // - Chrome only opens 1 of them without popup warning
    // - IE only opens 1 of them WITH 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;
    });

});

Что он делает для каждого элемента ссылки:

  • Создать форму
  • Дайте ему атрибуты
  • Добавьте его в DOM, чтобы он мог быть отправлен
  • Отправить
  • Удалите форму из DOM, удалив все следы * Вставьте злой смех *

Теперь у вас есть новая вкладка/окно загрузки "https://google.nl" (или любой URL-адрес, который вы хотите, просто замените его). К сожалению, когда вы пытаетесь открыть несколько окон таким образом, вы получаете сообщение Popup blocked при попытке открыть второй (первый из них все еще открыт).

Подробнее о том, как я получил этот метод, можно найти здесь:

Открытие нового окна/вкладки без использования window.open или window.location.href

Ответ 7

Он ничего не делает, потому что никаких событий не было связано с событием. Если я правильно помню, jQuery поддерживает собственный список обработчиков событий, привязанных к NodeLists для производительности и других целей.

Ответ 8

Если вам нужна эта функция для одного случая или очень мало кассет. (ваше приложение не требует этой функции) Я бы предпочел оставить jQuery как есть (по многим причинам, включая возможность обновления до более новых версий, CDN и т.д.) и иметь следующее обходное решение:

// For modren Browsers
$(ele).trigger("click");

// Relaying on Paul Irish conditional class names http://bit.ly/HWIpAp (via HTML5 Boilerplate http://bit.ly/HUzi3I) where each IE version gets a class of its Version
$("html.ie7").length && (function(){
    var eleOnClickattr = $(ele).attr("onclick") 
    eval(eleOnClickattr);
  })()

Ответ 9

Чтобы открыть гиперссылку на той же вкладке, используйте:

$(document).on('click', "a.classname", function() {
    var form = $("<form></form>");
    form.attr(
    {
        id     : "formid",
        action : $(this).attr("href"),
        method : "GET",
    });

    $("body").append(form);
    $("#formid").submit();
    $("#formid").remove();
    return false;
});

Ответ 10

Вы можете использовать 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() });