Как исправить конфликт Zoomooz.js с автозаполнением JQueryUI? - PullRequest
Новая
       40

Как исправить конфликт Zoomooz.js с автозаполнением JQueryUI?

0 голосов
/ 17 октября 2019

Когда я помещаю zoomooz.js на веб-страницу с автозаполнением jqueryui, он работает только в первый раз, раскрывающееся меню больше не принимает щелчок мышью. Для работы я перемещаю мышь на цель и нажимаю клавишу ввода на клавиатуре. 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
 
<script>
  $( function() {
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: availableTags
});
  } );
</script>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

<img class="zoomTarget" data-targetsize="0.05" data-closeclick="true" src="file.png">

теги автозаполнение не работает всегда, только в первый раз, но если я удалю zoomooz, он будет работать нормально

1 Ответ

0 голосов
/ 18 октября 2019

Я не могу воспроизвести проблему, как вы ее описали. Если вы используете автозаполнение пользовательского интерфейса jQuery, вы должны использовать правильные параметры. Вот рабочий пример. 

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#numean").autocomplete({
    source: availableTags,
    minLength: 1,
    open: function() {
      console.log("Open Triggered");
    },
    focus: function() {
      console.log("Focus Triggered");
      return true;
    },
    select: function() {
      console.log("Select Triggered");
      return true;
    }
  });

  $(".zoomTarget").zoomTo({
    duration: 1000,
    closeclick: true,
    targetsize: 0.05
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="numean" value="">
<br />
<img class="zoomTarget" width="50%" src="https://i.imgur.com/FThOLcL.jpg">

Подробнее:

Обновление

После некоторого тестирования я вижу, что пузырькисобытия click нарушается. Например, в приведенном выше примере в первом раунде все работает, как ожидалось. Во втором поиске вы можете ↓ по вашему выбору и нажать Введите и focus и select срабатывает. Тем не менее, если вы попытаетесь переместить мышь и щелкнуть элемент, срабатывает только focus. Я почти уверен, что конфликт вызван настройкой closeclick: true. Я думаю, что это прослушивание в более высоком объеме после Zoom, чем событие щелчка для select.

Я бы посоветовал установить closeclick: false и затем создать другой метод закрытия. Либо кнопка, либо какое-то другое более конкретное событие.

Вы также можете заметить, что я сначала загрузил Zoomooz перед jQuery. Я заметил, что если они загружались в другом порядке, то возникали странные конфликты window.

...