“возвратите false”, проигнорирован в определенных браузерах для ссылки, добавленной динамично к DOM с JavaScript

Я динамично добавляю (ссылка) тег к DOM с:

var link = document.createElement('a');
link.href = 'http://www.google.com/';
link.onclick = function () { window.open(this.href); return false; };
link.appendChild(document.createTextNode('Google'));
//someDomNode.appendChild(link);

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

Мой код работает хорошо в IE и Firefox, но ложь возврата не работает в Safari, Chrome и Opera. Не работают, я подразумеваю, что по ссылке переходят после того, как новое окно открыто.

Я думаю, что мог бы быть из-за среды Google Maps V3...

Править: Видеть поведение на фактической странице:

  1. Перейдите к http://tinyurl.com/29q6nw6
  2. Нажмите на любой маркер на карте, воздушный шар покажет.
  3. Нажмите на заголовок в воздушном шаре, ссылка должна открыться в новом окне (работа в IE и FF, но не в Safari, Chrome и Opera.

Любая справка приветствуется!

Edit2: проблема находится в функции "MakeInfoWindowContent", который находится в "gmaps3.js". Я не использую DOM для создания элементов (я использую строку), потому что эта строка HTML должна быть передана Google Maps (для информационного окна - воздушный шар). На самом деле та же ссылка создается в 2 различных местах. Один слева, созданный с функцией DOM (как показано в этом вопросе), который работает во всех браузерах и один в воздушном шаре, созданном со строкой HTML, этот не работает хорошо в Safari, Chrome и Opera (по ссылке переходят после нового окна, открытого даже с ложью возврата).

Редактирование 3: Все еще никакая подсказка, почему это происходит... Если у кого-либо есть идея, сообщите мне!

5
задан AlexV 30 July 2010 в 18:41
поделиться

11 ответов

Может, сработает предотвращение действия по умолчанию для события? Не уверен, что gmaps обрабатывает ссылки в своем информационном окне каким-либо другим образом, если нет, он должен работать.

Обновление: первый пример не сработал. Событие не было передано при использовании "встроенного" onclick для назначения события. Этот протестирован и признан работающим .

function bindEvent(target, event, handler) {
    if (typeof target.addEventListener != 'undefined') {      
        target.addEventListener(event, handler, false);
    } else if (typeof target.attachEvent != 'undefined') {
        target.attachEvent('on' + event, handler); 
    } 
}

var link = document.createElement('a');
link.href = 'http://www.google.com/';
link.appendChild(document.createTextNode('Google'));

bindEvent(link, 'click', function (e) { 
    if (typeof e.preventDefault != 'undefined') {
        // Common/W3C events
        e.preventDefault();
    } 

    // (Old) IE specific events
    e.returnValue = false; 

    var target = e.target || e.srcElement;
    window.open(target.href); 

    return false; 
});

document.getElementsByTagName('body')[0].appendChild(link);
3
ответ дан 14 December 2019 в 04:32
поделиться

Как насчет того, чтобы не использовать скрипт для открытия окна?

var link = document.createElement('a');
link.href = 'http://www.google.com/';
link.target = '_blank';
link.appendChild(document.createTextNode('Google'));
0
ответ дан 14 December 2019 в 04:32
поделиться

Установите href в 'javascript:void(0);' и вместо ссылки this.href внутри обработчика onclick, жестко закодируйте URL там.

3
ответ дан 14 December 2019 в 04:32
поделиться

Несколько идей

  • Карты Google каким-то образом повторно копируют (просто предположение) html-контент перед открытием всплывающего окна и оставляют js-события позади. Вы можете попробовать прикрепить прослушиватель событий после открытия всплывающего окна gmap.

  • в функция MakeInfoWindowContent () код конструирует события, объединяя строки - возможно, Вам тоже стоит попробовать.

  • Последнее (и глупое) предложение: попробуйте использовать addEventListener вместо прямого присоединения события.

1
ответ дан 14 December 2019 в 04:32
поделиться

Проблема может заключаться в ошибке сценария, которая отменяет выполнение javascript до того, как будет достигнуто значение return false. В этом случае обычно переходят по ссылке. Проверьте, используете ли вы специфичный для браузера метод / свойство, и проверьте наличие ошибок javascript.

Я не могу проверить ваш сценарий, поскольку он, похоже, недоступен в банкомате.

1
ответ дан 14 December 2019 в 04:32
поделиться

Попробуйте следующее:

link.onclick = function(event) {
    window.open(this.href);
    if (event.stopPropagation)
        event.stopPropagation();
    return false;
};

Я напрямую изменил DOM с помощью Chrome-Developer-Tools, и у меня это сработало.

0
ответ дан 14 December 2019 в 04:32
поделиться
var link = document.createElement('A');
link.setAttribute('href', 'http://www.google.com/');
link.setAttribute('onclick', 'window.open(this.href, "_blank");return false;');
link.appendChild(document.createTextNode('Google'));
0
ответ дан 14 December 2019 в 04:32
поделиться

@AlexV - Вы должны сохранять встроенные события onclick атомарными. Есть два простых решения: заключить все действие в одну самовыполняющуюся функцию или переместить window.open () и return false в его собственную функцию:

Вариант первый

Используйте самоисполняющуюся анонимную функцию.

result += '    <h3><a href="' + url + '" onclick="(function(){window.open(' + url + '); return false;})()">' + instituteName + '</a></h3>' + "\n";

Вариант второй

Переместите код в отдельную функцию:

function openCustomWindow(url) {
    window.open(url);
    return false;
}

... и вызовите эту функцию вместо:

result += '    <h3><a href="' + url + '" onclick="openCustomWindow(' + url + ')">' + instituteName + '</a></h3>' + "\n";

[EDIT] Мне очень жаль. Я полностью скучал по этому поводу. Вы все равно должны использовать один из двух методов, описанных выше (только функция может возвращать false , а не оператор). Проблема здесь в том, что ваш this изменяется с вашей функции на фактический onclick. При выполнении в onclick, this относится к окну , а не к событию. Поскольку нет window.href , инструкция window.open (undefined) не выполняется. И поскольку это не удается, срабатывает тег . Я думаю, указав URL дважды (один раз в и еще раз в window.open ( ) должен исправить это.

0
ответ дан 14 December 2019 в 04:32
поделиться

На самом деле вы не "динамически добавляете тег ссылки в DOM". Ваш код просто конкатенирует строки HTML. Замените вашу функцию MakeInfoWindowContent (в gmaps3.js) на собственные методы DOM.

function MakeInfoWindowContent(name, institutionName, description, address, url) {
    var result = document.createElement('div');
    result.className = 'infoBulle';
    // etc.
    return result;
}
0
ответ дан 14 December 2019 в 04:32
поделиться

Я протестировал это решение и оно работает!

Я предлагаю вам другой подход, но, на мой взгляд, более простой и чистый: используйте jQuery .live events (я вижу, что вы уже используете jQuery, поэтому проблем с этим быть не должно)!

Вам нужно только два небольших изменения:

Первое изменение:

Измените 3-ю строку функции MakeInfoWindowContent для создания ссылок таким образом (она просто удаляет атрибут onclick и добавляет класс для ясности):

result += '<h3><a class="marker_link" href="' + url + '">' + instituteName + '</a></h3>' + "\n";

Второе изменение:

Где бы вы ни захотели (например, при загрузке DOM или перед созданием карты), выполните это:

$('div#resultMap a.marker_link').live('click', function(e) {
    window.open(this.href);
    e.preventDefault();
});

End :)

Это работает, перехватывая событие click в фазе всплытия в документе. Я пробовал это и это работает даже в Google Chrome.

0
ответ дан 14 December 2019 в 04:32
поделиться

Попробуйте использовать делегирование событий jQuery:

function initialize(){
    // ... code ...

        $("#resultMap").delegate("a.myLink").click(function(){
            window.open(this.href, "myWindow");
            return false;
        });
        Search();

    // ... more code ...
 }


function MakeInfoWindowContent(name, instituteName, description, address, url)
{
    var result = '<div class="infoBulle">';
    if (url != '')
        result += '    <h3><a href="' + url + '" class="myLink">' + instituteName + '</a></h3>';
    else
        result += '    <h3>' + instituteName + '</h3>';
    if (Trim(description) != '')
        result += '    <p>' + description + '</p>';
    result += '    <p>' + address + '</p>';
    result += '</div>';
    return result;
}
0
ответ дан 14 December 2019 в 04:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: