0

我想在一个页面中做一个教程，所以我的想法是创建某种“掩码”来禁用所有页面并启用一个“不可见”框，其中的东西（链接和页面的其他内容）可以工作。

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

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 插件和行为。我需要修改很多每一页。我需要的是一个“覆盖”我所有代码的非侵入式解决方案

有任何想法吗 ？

4

3 回答 3

0

使用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>
于 2010-11-12T09:28:54.997 回答
0

您可以使用 jQueryUI 中的 jQuery 对话框插件，这是实现您需要的功能的最简单和最快的方法。一探究竟。

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

于 2010-11-12T09:31:31.760 回答
0

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

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

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

第一个是禁用文档上的所有默认单击操作，然后（基本上）在适当的容器上重新启用它们。

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

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

$(document).on("click", function(event) {
  event.preventDefault();
});

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

codepen.io 上附带 HTML 的示例

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

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

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

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

这个非常简单，但可能没有那么优雅。

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

要记住的一件事是，您不仅需要检查 是否event.target在与类选择器匹配的元素集中，还要检查类选择器的所有子元素：否则嵌套在直接子元素之外的任何 <a> 元素都将失败去工作。

$(document).on("click", function(event) {

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

});

codepen.io 上附带 HTML 的示例

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

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

于 2015-01-30T00:36:42.950 回答