除了main中的特定元素之外，选择整个元素
除了main中的特定元素之外，选择整个元素
提问于 2019-05-23 12:15:40
所以，我有一个主div (模态容器)，它包含一个完整的页面，在主div内部有另一个div (情态内)和两个按钮。主DIV设置为页面的完全高度/宽度，DIV (模式-内部)具有屏幕的calc(100% -40 to )宽度。
通过Jquery，我在每个按钮单击事件上添加了两个函数，比如jq-按钮-ok和jq-按钮-取消。现在，当我尝试添加一个点击事件到一个模态容器，但是它的调用两个按钮同时点击函数。解决办法是什么？
HTML：
<div class="modal-container" role="dialog">
<div class="modal-inner" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="button jq-button-ok">OK</button>
<button class="button jq-button-cancel">Cancel</button>
</div>
</div>
</div>
</div>CSS：
.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 102;
background: rgba(216,216,216,.25);
transition: 0.3s opacity ease-in;
opacity: 1;
}
.modal-inner {
position: static;
width: 500px;
height: auto;
max-width: calc(100% - 20px);
transition: none;
transform: none;
}Jquery：
$(document).ready(function () {
$("body").on("click", ".jq-button-ok", function (e) {
e.preventDefault();
callfunstionone();
});
$("body").on("click", ".jq-button-cancel", function (e) {
e.preventDefault();
callfunstiontwo();
});
$("body").on("click", ".modal-container:not(.modal-inner)", function (e) {
callfunstionfour();
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-23 12:21:48
与其使用e.preventDefault()，不如使用e.stopPropagation()
事件接口的
stopPropagation()方法防止当前事件在捕获和冒泡阶段中的进一步传播。
$(document).ready(function () {
$("body").on("click", ".jq-button-ok", function (e) {
e.stopPropagation();
//callfunstionone();
alert('You have clicked button-ok')
});
$("body").on("click", ".jq-button-cancel", function (e) {
e.stopPropagation();
//callfunstiontwo();
alert('You have clicked cancel')
});
$("body").on("click", ".modal-container:not(.modal-inner)", function (e) {
//callfunstionfour();
alert('You have clicked modal-container but not modal-inner')
});
});.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 102;
background: rgba(216,216,216,.25);
transition: 0.3s opacity ease-in;
opacity: 1;
}
.modal-inner {
position: static;
width: 500px;
height: auto;
max-width: calc(100% - 20px);
transition: none;
transform: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-container" role="dialog">
<div class="modal-inner" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="button jq-button-ok">OK</button>
<button class="button jq-button-cancel">Cancel</button>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-05-23 12:26:10
click事件正在将dom从按钮传播到div，因此这两个元素事件处理程序都会被触发。您可以使用Event.stopImmediatePropagation停止传播。
$(document).ready(function () {
$("body").on("click", ".jq-button-ok", function (e) {
e.preventDefault();
console.log('callfunstionone()');
e.stopImmediatePropagation();
});
$("body").on("click", ".jq-button-cancel", function (e) {
e.preventDefault();
console.log('callfunstiontwo()');
e.stopImmediatePropagation();
});
$("body").on("click", ".modal-container", function (e) {
console.log('callfunstionfour()');
});
});.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 102;
background: rgba(216,216,216,.25);
transition: 0.3s opacity ease-in;
opacity: 1;
}
.modal-inner {
position: static;
width: 500px;
height: auto;
max-width: calc(100% - 20px);
transition: none;
transform: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="modal-container" role="dialog">
<div class="modal-inner" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="button jq-button-ok">OK</button>
<button class="button jq-button-cancel">Cancel</button>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-05-23 12:31:08
您需要排除要排除的按钮：
$(document).ready(function () {
$("body").on("click", ".jq-button-ok", function (e) {
e.preventDefault();
e.stopPropagation();
callfunstionone();
});
$("body").on("click", ".jq-button-cancel", function (e) {
e.preventDefault();
e.stopPropagation();
callfunstiontwo();
});
$("body").on("click", ".modal-container:not(.jq-button-ok):not(.jq-button-cancel)", function (e) {
callfunstionfour();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56275023
复制相关文章
相似问题
腾讯云开发者
