Question

我在尝试创建非点击式div时遇到了问题。

是的，它会停止传播，但会停止不应停止的内容并且不会停止应该停止的内容

JS

//screen has set stopPropagation

$("#smokeScreen").click(function(){
   event.stopPropagation();
})

HTML

<div id="content">
    <!-- lots of stuff that has to not be clickable while "smokeScreen is visible" -->
    <!-- lots of stuff that has to not be clickable while "smokeScreen is visible" -->
    <div id="smokeScreen">
        <!-- covers whole viewport -->

        <div id="form"><!-- another form stuff here --></div>
        <!-- covers whole viewport -->
    </div>

    <!-- lots of stuff that has to not be clickable while "smokeScreen is visible" -->
    <!-- lots of stuff that has to not be clickable while "smokeScreen is visible" -->
</div>

有趣的是，这个代码使所有内容都可以点击，除了表单...

所以，请问，任何提示？

指针事件：无;在css中不是一个解决方案，由于某种原因，它不能像简单的css一样工作，我还没有想到为什么，但我需要保持与旧浏览器的兼容性，这是一个非常新的陈述。

Answer 1

所以，你似乎在这里缺少的是stopPropagation()阻止事件冒泡到父元素。

不会阻止这些元素或任何兄弟元素被点击。

您需要做的是放置一个覆盖整个屏幕的元素，然后将z-index属性设置为比该元素更高的值，以便它可见（那么就不需要调用{{1 }}）。

使用您的代码和内联样式，这是一个示例：

stopPropagation()

stopPropagation（）停止在错误的一侧传播

1 个答案: