jquery：如何启用页面区域中的点击（禁用休息）

发布于 2024-10-01 13:29:31 字数 704 浏览 2 评论 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 插件和行为。我需要对每一页进行很多修改。我需要的是一个“覆盖”我所有代码的非侵入式解决方案有什么

想法吗？

原文

I would like to do a tutorial in a page, so my idea is to create some kind of "mask" that disable all the page and enable just a "invisible" box, where things (links and other stuff of the page) works.

It's like a "ozone hole" where links and stuff works, but if you click anywhere else on the page, the click is "captured" and do nothing.

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

I'm starting working with this ... but I do not know what to put in "xxxx" to tell it "leave this area working".

Also I tried with a 100% overlay with z-index:10000 , and above it (z-index:10001) create the "hole" ... but I do not either how to tell javascript to allow clicks in this area of the belowest original page ...

I hope I explained myself :)

Solutions like dialog or adding "disable" classes to elements will not work:

a) Dialog creates a box over the page in which you can "play" ... what I want is exactly the opposite, create a box IN THE PAGE where you can play, disabling the rest

b) Adding "#disable" or similar solutions to elements to disable them after is crazy. I have tons of other jquery plugins and behaviours. I'd need to modify a lot each page. What I need is a non-intrusive solution "over" all my code

Any ideas ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揪着可爱 2024-10-08 13:29:31

使用 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>

Use event.preventDefault() , here is an example

<!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>

回复收藏 0 原文

迷雾森÷林ヴ 2024-10-08 13:29:31

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

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

回复收藏 0 原文

眼藏柔 2024-10-08 13:29:31

虽然自从被问到以来，您希望在这些年里找到自己的解决方案，但我给出了一个合适的答案，因为我有一个类似的问题需要解决。

本质上有两种不同的方法可以解决这个问题，它们都符合您的标准（这也恰好是我的标准！）。这两种方法对于元素类型都很灵活（它们不仅仅适用于元素）。

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

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

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

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

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

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

codepen.io 上附带 HTML 的示例

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

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

如果您尝试附加处理程序，然后有选择地将其从适当分类的项目中删除，或者如果您尝试仅将处理程序附加到没有类的元素（使用 CSS 选择器 :not 或通过限制使用 .not() 的 jquery 选择）这种冒泡行为是它不起作用的原因。即使您没有将 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 元素）。在大多数情况下我们可能并不关心，但意识到这一点并不是一件坏事。

While you've hopefully found your own solution to this in the years since it was asked, I'm throwing in an appropriate answer since I had a similar problem that needed solving.

There are essentially two different ways of solving this which meet your criteria (which happened to be mine as well!). Both of these are flexible to element types (they work on more than just <a> elements).

(for both of these solutions, assume that the class working-links is being applied to any container elements you wish to have functional linking inside of. Keep in mind that while both of these examples are based off of using document as the target container for preventing links from working, it would usually make more sense to have the target be something more refined, like whatever wraps the main content region of the page)

The first is to disable all default click actions on the document, and then (essentially) re-enable them on an appropriate container.

How this works in practice is that an event handler is applied to the document object itself (or any element containing everything that needs to be prevented—which would be best so that site menus/etc still work with no changes needed). Events bubble upwards: you don't need an event handler on every link, you just need one on the document to intercept any clicks on links.

We can take advantage of this behavior to attach another event handler on any containers we want clicks to work within (say, one with a class of working-links) which prevents the click event from propagating up to the handler attached to the document object.

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

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

Example with accompanying HTML on codepen.io

Note that I've provided these using on() instead of click() because it allows for easily changing these to being delegated events if you are targeting something other than the entire document and may have more targeted regions inserted dynamically (AJAX/etc). This only matters if you chose to bind the event more selectively: at the document level, any changes inside it don't matter and will still be captured by the event binding, since they'll still bubble up properly.

This may matter more for the working-links event: you will need to change that appropriately to add a selector in on() if you are dynamically adding more to the page after this is bound.

If you tried attaching a handler and then selectively removing it from an appropriately classed item, or if you tried attaching a handler only to elements that did not have a class (using the CSS selector :not or by restricting the jquery selection using .not()) this bubbling behavior is why it did not work. Even if you don't attach the event.preventDefault() to the links or their container, if it attaches to any of their ancestors it will bubble to them and the action will still be prevented.

The other method is to apply a click event handler to the document/main container element, and then apply logic dependent on the `event.target`.

This one is pretty straightforward, but possibly not as elegant.

We're going to simply capture all click events at the document (or whatever container you choose to target) and figure out if the event.target is wrapped within one of our excluding elements. The easiest way to do this is probably to use jquery's is() function.

One thing to keep in mind is that you will need to check not only if the event.target is within the element set matched by the class selector, but also all children of the class selector: otherwise any <a> elements nested beyond the immediate children will fail to work.

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

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

});

Example with accompanying HTML on codepen.io

On the plus side, this method does not require any changes in order to function within a dynamic page, at least for the addition of working-links classed elements. If you're adding more of the non-click containers, it will obviously need to be adapted appropriately to make the on() call use delegation mode (see the appropriate jQuery documentation on event binding).

On the down side, this is going to use a bit more resources for the event handler (in order to calculate the jQuery element set each time it runs) than the other method. We probably don't care in most circumstances, but it's not a bad thing to be aware of.

回复收藏 0 原文

~没有更多了~