如何修复冲突 Zoomooz.js 与 JQueryUI 自动完成?

Question

当我将 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，它可以正常工作

Answer 1

我无法复制您所描述的问题。如果您使用的是 jQuery UI 自动完成功能，则必须使用正确的选项。这是一个工作示例。

$(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">

另请参阅：

• j查询用户界面 |自动完成
• 中焦.js

更新

经过一些测试，我可以看到click事件的冒泡正在被打乱。例如，在上面的示例中，在第一轮中，一切都按预期工作。在第二次搜索中，您可以↓到您的选择并按Enter并focus，select被触发。但是，如果您尝试移动鼠标并单击该项目，则只会触发focus。我很确定冲突来自closeclick: true环境。我认为这是在 Zoom 之后在更高的范围内侦听，然后是select的点击事件。

我建议设置closeclick: false然后创建另一种关闭方法。按钮或其他更具体的事件。

您可能还注意到我在jQuery之前首先加载了Zoomooz。我注意到如果它们以其他顺序加载，就会有一些奇怪的window冲突。