如果模式可见，则阻止任何点击

Question

<body>
<div id='container'>
<div id='cpanel' style="position:fixed;">525</div>
</div>
<div class='modal' style="position:fixed;>323</div>
</body>

I want to prevent any click on container and its children if modal is visible. 如果modal可见，我想防止对container及其子级的任何单击。

js js

$('#container, #cpanel').click(function(){
    if ($('.modal').is(':visible')) {return false;}
});

Click on container is blocked, but on cpanel is not ! 单击container被阻止，但单击cpanel则不！

Any help? 有什么帮助吗？

Answer 1

A possible solution can consider the CSS pointer-event property. 可能的解决方案可以考虑CSS 指针事件属性。

If you are using the jquery ui dialog you can add the code to the events: 如果使用的是jQuery ui对话框，则可以将代码添加到事件中：

open( event, ui ) 打开（事件，UI）
close( event, ui ) (the code for removing the newly added style) close（event，ui）（用于删除新添加的样式的代码）

 $('.modal').dialog({ open: function( event, ui ) { $('#cpanel').css('pointer-events','none'); }, close: function( event, ui ) { $('#cpanel').css('pointer-events','auto'); }, }); $('#container, #cpanel').click(function(e){ e.stopPropagation(); console.log('--->clicked'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <div id='container'> <div id='cpanel' style="position:fixed;">525</div> </div> <div class='modal' style="position:fixed;">323</div>

Answer 2

Try stopPropagation method: 尝试stopPropagation方法：

$('#container, #cpanel').on("click", function(event){
    if ($('.modal').is(':visible')) {
       event.stopPropagation()
    }
});

https://codepen.io/anon/pen/zjywXV https://codepen.io/anon/pen/zjywXV

如果模式可见，则阻止任何点击

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-05-18 19:49:02

解决方案2
-1 2018-05-18 19:37:43

如果模式可见，则阻止任何点击

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-05-18 19:49:02

解决方案2 -1 2018-05-18 19:37:43

解决方案1
0 已采纳 2018-05-18 19:49:02

解决方案2
-1 2018-05-18 19:37:43