Несовместимость всплывающего браузера - PullRequest
Новая
       14

Несовместимость всплывающего браузера

1 голос
/ 20 января 2010

У меня есть всплывающее меню с выпадающими меню. Я уменьшил его и упростил для целей тестирования, но он все равно не работает так, как я хочу / должен. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/javascript">
  jQuery(document).ready(function(){    
    jQuery('.trigger').click(function(){
      var picker = jQuery('.popup');
      jQuery('<div></div>').css({
        height: screen.height, 
        width: screen.width, 
        position: 'absolute',
        'z-index': -1,
        top: picker.offset().top*-1, 
        left: picker.offset().left*-1,
        border: '1px solid red'
      }).click(function(){
         picker.trigger('focusout');
         jQuery(this).hide();
      }).prependTo(picker); 
      picker.css('visibility', 'visible');
    });
    jQuery('.popup').live("focusout", function() {
      jQuery('.popup').fadeTo(500, 0.0, function() {
        jQuery('.popup').css('visibility', 'hidden');
        jQuery('.popup').css('opacity', '1.0');
      });
    });
  });  
  </script>
</head>
<body>
  <p>
    <input type=text class=trigger />
    <div id=popup-div class=popup style="visibility: hidden; border: 1px solid red">        
        <select>
        <option>option1</option>
        </select>
        <p>Popup text</p>       
    </div>
  </p>
</body>

Когда вы щелкаете по полю ввода, появляется «всплывающее окно», если вы щелкаете за красной рамкой, оно исчезает. Если вы нажмете на опцию выбора, она не должна исчезнуть! Однако в этом отношении Chrome не работает так же, как IE / FF / Opera / Safari, и заставляет div исчезать.

(с использованием Chrome 4.0.295.0)

Кто-нибудь знает обходной путь для Chrome?
Вызов event.stopPropagation () для выбранных элементов до сих пор не работал

1 Ответ

0 голосов
/ 01 мая 2010

Это похоже на правильное поведение в Chrome 5.0.375.23 , однако я бы немного изменил его, чтобы иметь согласованное поведение во всех браузерах, включая Chrome 4, поскольку focusout не обязательно является допустимым событие в элементе, который не может иметь focus в первую очередь. Лучший подход здесь состоит в том, чтобы воспользоваться преимуществами всплытия и порядка событий. Для этого вы должны заменить это: 

jQuery('.popup').live("focusout", function() {
  jQuery('.popup').fadeTo(500, 0.0, function() {
    jQuery('.popup').css('visibility', 'hidden');
    jQuery('.popup').css('opacity', '1.0');
  });
});

С этим: 

jQuery('.popup, .trigger').live('click', function(e) {
  e.stopImmediatePropagation()
});
jQuery(document).click(function() {
  jQuery('.popup:visible').fadeTo(500, 0.0, function() {
    jQuery(this).css('visibility', 'hidden').css('opacity', '1.0');
  });
});

Что происходит, если click возник внутри всплывающего элемента или триггера (открывая его), действие скрытия не выполняется, поскольку выполнение обработчиков этого события для одного и того же элемента (document) предотвращено (как пузырь, но это не имеет значения в приведенном выше коде). Даже если .live() живет в документе, с помощью event.stopImmediatePropagation() вы можете запретить выполнение обработчиков того же уровня, если они были связаны позже, так как обработчики выполняются в том порядке, в котором они были связаны.

В качестве отступления от .stopPropgation(): Если вы измените это значение на event.stopPropagation(), другой обработчик все равно выполнится, скрывая всплывающее окно (хотя вы можете использовать event.stopProgation() и проверить event.isPropogationStopped() во втором обработчике).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...