Question

当用户选择一行并将其放在jquery网格之外时，我正试图获取一个事件。这是在网格内发生拖放的拖放功能，完全正常 -

    $(".grid-canvas")
        .on("drop", function (e, dd) {
              // somecode
                    });

我正试图跟踪阻力和阻力在网格画布div之外发生“ANYWHERE”。但反向选择似乎不起作用。我尝试了这个，但没有工作 -

$(".grid-canvas")
    .not(this)
    .on("drop", function (e, dd) {
     alert("outside");
 });

我尝试了这个，但它触发了拖动和放大也在网格中掉落 -

$(":not(.grid-canvas)")
                               .on("drop", function (e, dd) {
                                alert("outside");
                            });

任何帮助表示赞赏。感谢。

Answer 1

直接定位文档以获取所有内容，然后过滤掉自己嵌套在.grid-canvas内的任何内容（可能比伪选择器更有效）：

$(document).on('drop', function(e, dd) {
    if ( ! $(e.target).closest('.grid-canvas').length ) {
        // dropped outside
    }
});

Answer 2

首先，阅读“on”文档，以便您更好地理解。你的第二个例子说明如下：

Select all elements with the "grid-canvas" class
  ...that aren't `this`
  ...and watch for drop events on them, and do this when they happen

这显然不是你想要的。第二个更接近：

Select all elements that don't have a grid-canvas class
  ...and watch for drop events on them, and do this when they happen

哪个更接近，但是a）将事件监听器添加到页面中的几乎每个元素，这是一个非常糟糕的主意，并且b）仍然会触发 inside 你的grid-canvas div中的元素，这就是你所看到的，因为你仍然将听众附加到他们身上。

您可能想要做的是：

Select a high-level element (e.g. `body`)
  ...listen for a drop event, and check if the drop event happened on .grid-canvas or one of its children

这看起来像是：

$('body').on('drop', function(evt) {
  //Check if the element dropped on has a .grid-canvas as a parent
  if($(evt.target).parents('.grid-canvas').length == 0) {
    alert('Outside');
  }
}

有几种方法可以检查目标是否在.grid-canvas中，我使用的只是一个例子。你也可以做$('.grid-canvas').has(evt.target)，例如 - 从另一个方面去做，这可能会更有意义，这取决于你如何看待它。

但总的来说：jQuery不是英文，你不能只是将声音的命令串在一起就像他们应该做你想做的那样。确保你阅读了你正在使用的功能并了解它们的功能，并且你将更快地构建你的jQuery技能。

div选择器的jquery逆

2 个答案: