我有一些使用jQuery脚本开发的页面，它自动显示文本表单的建议结果，还有一些我实现的JavaScript来显示叠加层并通过事件监听器关闭它。
问题是，页面上有一个点与两个脚本相交：在一个由JavaScript事件监听器控制的框内有一个表单元素（使用jQuery脚本）。
无论我做什么，当用户点击jQuery创建的下拉菜单时，叠加层都会消失。因为事件监听器认为你已经在叠加div之外点击了，即使你没有。
那么，我该如何解决这个问题呢？我尝试在JavaScript中添加event.stopPropogation()来免除代码div，但这似乎不起作用。我也试过在jQuery中添加一个异常，但也许我只是没有正确地做到这一点。
这是jQuery脚本：
$(function() {
var availableTags = [
'.$tags1.'
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
} );
以下是我用于放置叠加层并允许内部点击不影响它的JavaScript。
window.addEventListener('click', function(event){
var box = document.getElementById('menu');
box.style.display = 'none';
var box2 = document.getElementById('overlay22');
box2.style.display = 'none';
});
var boxa = document.getElementById('establishmentmenu');
boxa.addEventListener('click', function(event) {
event.stopPropagation();
});
var box = document.getElementById('menu');
box.addEventListener('click', function(event) {
event.stopPropagation();
});
当我点击jQuery菜单时，知道如何阻止覆盖层被隐藏吗？
编辑：在编译器中添加了代码段。不幸的是，它编译但不会产生叠加。不确定我是否遗漏了某些内容，或者由于某种原因这是不允许的。
$(function() {
var availableTags = [
"#eastside", "#west6th", "#historic6th", "#austin"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
event.stopPropagation();
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
} );
window.addEventListener('click', function(event){
var box2 = document.getElementById('overlay22');
box2.style.display = 'none';
var box5 = document.getElementById('tagsbox');
box5.style.display = 'none';
});
var box5 = document.getElementById('tagsbox');
box5.addEventListener('click', function(event) {
event.stopPropagation();
});
function toggle(id){
var myDiv=document.getElementById(id);
if(myDiv.style.display=='none'||myDiv.style.display==''){
myDiv.style.display='block';
}
else{closeD(id)}
}
function closeD(id){
document.getElementById(id).style.display='none';
}
#overlay22 {
display: none;
width: 100%;
height: 100%;
position:fixed;
z-index: 8;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.6);
/*overflow-x: hidden;*/
}
.linkLike {
cursor: pointer;
color: rgb(65, 135, 175);
text-decoration: none;
transition: color 0.2s ease;
}
#tagsbox{
display: none;
width: 600px;
height: 480px;
border-radius: 4px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 125px;
padding-top: 4px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
z-index: 10;
color: white;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.8);
overflow-y: auto;
}
#overlaywrap {
width: 100%;
height: 0px;
position:fixed;
z-index: 8;
top: 0;
left: 0;
/*overflow-x: hidden;*/
}<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>
<body>
<span class="linkLike" onClick="toggle('overlay22');toggle('tagsbox');">Suggest Tags</span>
<div id="overlay22"></div>
<div id="overlaywrap">
<div id="tagsbox"><h2>Add Tags: Jack & Ginger's</h2>
<form id="tagsinfo" action="https://www.theaustinindustry.com/submissions/tagssubmit.php?action=012619" enctype="multipart/form-data" method="post">
<div id="tagsboxinner"><span class="reputationcomment">
Users must have a reputation of at least 50 to propose tags be added to a venue!<br><br>Users must have a reputation of at least 500 to add without moderation or create new tags!</span><br>
<br>
<p><b>Location Tags: </b><br>#austin, #domain, #rockrose<br><input type="text" id="tags" name="locationtags" size="26" placeholder="Add Location Tags #tag1, #tag2"></p>
<p><b>Description Tags: </b><br>#pub, #restaurant, #Irish, #tableservice, #coveredpatio, #bar<br><input type="text" id="tags2" name="descriptiontags" size="26" placeholder="Add Description Tags #tag1, #tag2"></p></div>
<button id="submit4" type="submit4" name="submit4" value="submit4">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form></div>
</div>
</body>
答案 0 :(得分：0)
首先，我建议您使用一致的方法来附加事件处理程序。它通常只会增加不必要的混淆，使用jquery和vanilla js来做同样的事情。坚持其中任何一个。
要解决您的问题，以下任一方法都可以为您提供帮助：
如果动态创建元素，则它们不会触发在创建之前附加的事件处理程序。您可以通过更改
动态地使用jquery轻松附加事件处理程序set ( TRUNK_SOURCE_DIR ../../../../Source)
set ( PLUGIN_SRC_DIR ../../../../Source/plugins)
set ( GAME_SRC_DIR ../../../Source)
以下符号：
$('.yourelement').on('click', function(){});
（在早期的jQuery版本中，这是通过一个名为// It's usually encouraged to use the nearest ancestor element
// as reference point instead of 'body'
$('body').on('click', '.yourelement', function(){});
的单独函数完成的。）
使用此表示法，将考虑任何新创建的元素。现在，即使对于新创建的元素，停止传播也应该可靠地工作。
此外，live还会为您提供event属性，如果上述方法不适合您，您可以使用该属性排除某些元素。见以下伪代码：
target