【问题标题】:jquery: How to enable clicks in a zone of the page (disabling rest)jquery:如何启用页面区域中的点击(禁用休息)
【发布时间】:2010-11-12 09:12:43
【问题描述】:

我想在页面中做一个教程,所以我的想法是创建某种“掩码”来禁用所有页面并仅启用一个“不可见”框,其中包含内容(链接和页面的其他内容) ) 有效。

这就像一个“臭氧洞”,链接和其他东西可以在这里工作,但如果您点击页面上的其他任何地方,点击就会被“捕获”并且什么都不做。

jQuery(".tutorial_holes").click(function(){ 
     xxxxx 
});
jQuery(document).click( function() { return false; } });

我正在开始处理这个......但我不知道在“xxxx”中输入什么来告诉它“让这个区域继续工作”。

我还尝试使用 z-index:10000 进行 100% 叠加,并在其上方 (z-index:10001) 创建“洞”...但我也不知道如何告诉 javascript 允许在此点击以下原始页面的区域...

我希望我自己解释一下:)

对话框或向元素添加“禁用”类等解决方案将不起作用:

a)对话框在页面上创建一个框,您可以在其中“播放”...我想要的恰恰相反,在页面中创建一个框,您可以在其中播放,禁用其余部分

b) 向元素添加“#disable”或类似的解决方案以禁用它们之后是疯狂的。我有很多其他的 jquery 插件和行为。我需要修改很多每一页。我需要的是一个“覆盖”我所有代码的非侵入式解决方案

有什么想法吗?

【问题讨论】:

    标签: jquery events capture invisible


    【解决方案1】:

    使用event.preventDefault(),这里是一个例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    </head>
    <body>
    <div id="disabled">
       <a href="http://www.example.com">foo</a>
       <form action="http://www.example.com">
            <input type="submit" value="" name="" />
       </form>
    </div>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script>
    $(document).ready(function(){
        $("#disabled a, #disabled input").click(function(event){
            event.preventDefault();
        });
    });
    </script>
    </body></html>
    

    【讨论】:

    • 嗨......这不是我想要的......这只会禁用“a”和“input”,而且我在页面中有很多东西(其他jquery插件,很多行为) ...此外,这会让我修改所有页面元素。相信我,页面中有很多插件和东西,用“#disable”修改所有东西会很疯狂......那是因为我想要某种“面具”来禁用所有东西,除了一个“洞”原始页面有效。
    • @user311188 您可以反转示例,以不影响特定区域,但如果有一种单行方式可以启用可能由另一个 JS 添加的特定 dom 节点中的所有可能功能听众,功能或任何我不相信的东西
    • 这就是我不知道该怎么做;)
    【解决方案2】:

    您可以使用 jQueryUI 中自带的 jQuery 对话框插件,这是实现您需要的功能的最简单、最快的方法。看看吧。

    http://jqueryui.com/demos/dialog/

    【讨论】:

    • 不,这不是我需要的...对话框在屏幕中放置一个对话框,您可以单击对话框内的内容,而不能单击对话框外的内容(在这种情况下,对话框将关闭)。我需要的是禁用当前页面中的所有内容(不是对话框),除了区域
    【解决方案3】:

    虽然您希望在被问到之后的几年中找到了自己的解决方案,但我给出了一个适当的答案,因为我有一个类似的问题需要解决。

    基本上有两种不同的方法可以满足您的标准(恰好也是我的标准!)。这两种元素对元素类型都很灵活(它们不仅仅适用于 元素)。

    (对于这两个解决方案,假设类 working-links 正在应用于您希望在其中具有功能链接的任何容器元素。请记住,虽然这两个示例都基于使用 document作为防止链接工作的目标容器,让目标更精致通常更有意义,比如包裹页面主要内容区域的任何东西)


    首先是禁用文档上的所有默认单击操作,然后(基本上)在适当的容器上重新启用它们。

    这在实践中的工作原理是将事件处理程序应用于文档对象本身(或包含需要阻止的所有内容的任何元素 - 最好这样站点菜单/等仍然可以在不需要更改的情况下工作)。事件向上冒泡:您不需要在每个链接上都有一个事件处理程序,您只需要在文档上使用一个事件处理程序来拦截对链接的任何点击。

    我们可以利用这种行为将另一个事件处理程序附加到我们希望单击在其中工作的任何容器上(例如,一个具有working-links 类的容器),以防止单击事件传播到附加到文档对象。

    $(document).on("click", function(event) {
      event.preventDefault();
    });
    
    $(".working-links").on("click", function(event) {
      event.stopPropagation();  
    });
    

    Example with accompanying HTML on codepen.io

    请注意,我使用on() 而不是click() 提供了这些,因为如果您的目标不是整个文档并且可能动态插入更多目标区域(AJAX /ETC)。这仅在您选择更有选择性地绑定事件时才重要:在文档级别,其中的任何更改都无关紧要,并且仍然会被事件绑定捕获,因为它们仍然会正确冒泡。

    这对于工作链接事件可能更重要:如果您在绑定后动态地向页面添加更多内容,您将需要适当地更改它以在on() 中添加一个选择器。

    如果您尝试附加处理程序,然后有选择地将其从适当分类的项目中删除,或者如果您尝试仅将处理程序附加到没有类的元素(使用 CSS 选择器 :not 或通过限制 jquery 选择使用.not()) 这种冒泡行为是它不起作用的原因。即使您没有将event.preventDefault() 附加到链接或其容器,如果它附加到它们的任何祖先,它也会冒泡到它们并且仍然会阻止该操作。


    另一种方法是将点击事件处理程序应用于文档/主容器元素,然后应用依赖于event.target的逻辑。

    这个很简单,但可能没有那么优雅。

    我们将简单地捕获文档(或您选择定位的任何容器)上的所有点击事件,并确定 event.target 是否包含在我们的排除元素之一中。最简单的方法可能是使用 jquery 的is() 函数。

    要记住的一点是,您不仅需要检查event.target 是否在与类选择器匹配的元素集中,还要检查类选择器的所有子元素:否则嵌套的任何 元素超过直系子女将无法工作。

    $(document).on("click", function(event) {
    
      if (! $(event.target).is($(".working-links, .working-links *").children())) {
        event.preventDefault();    
      }
    
    });
    

    Example with accompanying HTML on codepen.io

    从好的方面来说,此方法不需要任何更改即可在动态页面中运行,至少对于添加working-links 分类元素而言。如果您要添加更多非点击容器,显然需要对其进行适当调整以使 on() 调用使用委托模式(请参阅有关事件绑定的相应 jQuery 文档)。

    在不利的一面,这将比其他方法使用更多的资源用于事件处理程序(以便在每次运行时计算 jQuery 元素集)。在大多数情况下,我们可能不在乎,但这并不是一件坏事。

    【讨论】:

      猜你喜欢
      • 2013-03-27
      • 1970-01-01
      • 1970-01-01
      • 2011-12-24
      • 2019-11-09
      • 2017-08-31
      • 2015-11-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多