如何使用纯JavaScript（不使用jQuery）检测具有类选择器的元素外的点击事件。

27 浏览
0 Comments

如何使用纯JavaScript（不使用jQuery）检测具有类选择器的元素外的点击事件。

我想要使用类名作为选择器，来检测点击元素外部的动作。\n

var popElement = document.getElementById("pop");
document.addEventListener('click', function(event) {
    var isClickInside = popElement.contains(event.target);
    if (!isClickInside) {
        alert("外部");
        // 点击发生在popElement之外，执行某些操作
    }
});

0

3 答案

0 Comments

如何使用纯 JavaScript（不使用 jQuery）检测点击元素外部的问题

首先，您正在使用错误的函数来获取元素。它应该是getElementsByClassName("pop")而不是getElementsById("pop")，而且getElementsByClassName返回具有该类的元素的HTMLCollection。因此，您需要循环遍历它们，并检查是否点击在其中之一内部。这是演示。已经为

添加了一些样式，以便更容易区分它们。如果需要检查点击是否在任何

上，则需要检查并且只要发现它是在具有类pop的

内部被点击的，就中断循环并继续执行您的条件。但是，如果对于所有元素，IsClickedInside的结果都是false，那么您可以相应地处理它。

document.addEventListener('click', function(event) {
   var popElement = document.getElementsByClassName("pop");
   var isClickInside;
   for (var i = 0; i < popElement.length; i++) {
     isClickInside = popElement[i].contains(event.target);
     if (isClickInside) {
         break;
        //alert("Outside of" + popElement[i].id);
       //the click was outside the popElement, do something
     }
   }
  if(isClickInside){
     alert("Clicked inside one of the divs.");
   }else{
     alert("Clicked outside of the divs."); 
   }
});


div {
  height: 100px;
  border:2px solid black;
}


...


...

...

...

希望对您有所帮助 🙂

0
0 Comments

问题的出现原因是该代码无法检测点击事件是否发生在具有特定类选择器的元素之外，且代码本身存在一些逻辑错误。

解决方法是进行以下更改：

1. 使用document.getElementsByClassName方法获取所有具有特定类选择器的元素，并将其赋值给popElement变量。

2. 使用document.addEventListener方法监听整个文档的点击事件，并在事件处理函数中进行判断。

3. 使用循环遍历popElement数组中的每个元素。

4. 使用popEl.contains(event.target)方法判断当前点击事件的目标元素是否在popEl元素内部。

5. 如果目标元素不在popEl元素内部，则弹出提示框显示"Outside"。

6. 如果目标元素在popEl元素内部，则弹出提示框显示"Inside"，并使用break语句跳出循环。

然而，上述代码存在一些问题：

1. 代码中的alert()方法会为每个具有特定类选择器的元素弹出一个提示框，应该在找到匹配元素后立即跳出循环。

2. 代码只会检测第一个具有特定类选择器的元素是否与点击事件相关，而不会检测其他具有相同类选择器的元素。

3. 代码无法判断点击事件是否发生在所有具有特定类选择器的元素之外。

为了解决上述问题，可以进行以下更改：

1. 在找到匹配元素后，使用break语句跳出循环。

2. 使用Array.prototype.some方法替代循环，以便在找到匹配元素后立即跳出循环。

3. 删除alert()方法，只在点击事件发生在所有具有特定类选择器的元素之外时执行特定操作。

最后，需要指出的是，上述代码本身存在一些问题，无法正确地检测点击事件是否发生在所有具有特定类选择器的元素之外。

0
0 Comments

问题的出现原因：

这个问题的出现是因为在纯Javascript中，没有像jQuery那样的click事件的方法可以直接检测点击事件是否发生在具有特定类选择器的元素之外。在没有使用jQuery的情况下，需要通过遍历DOM来查看点击事件是否发生在具有特定类选择器的元素之外。

解决方法：

为了解决这个问题，可以使用以下代码来检测点击事件是否发生在具有特定类选择器的元素之外：

document.addEventListener('click', function(e) {
    var node = e.target;
    var inside = false;
    while (node) {
        if (node.classList.contains('pop')) {
            inside = true;
            break;
        }
        node = node.parentElement;
    }
   if (!inside) {
       alert('outside');
       // 点击事件发生在具有特定类选择器的元素之外
   } else {
       alert('inside');
   }
});

这段代码会遍历DOM，查看点击事件的目标元素以及其祖先元素是否具有指定的类选择器。如果找到了具有指定类选择器的元素，将inside变量设置为true，并跳出循环。如果在遍历完整个DOM后没有找到具有指定类选择器的元素，则点击事件发生在具有特定类选择器的元素之外。

使用这种方法，性能的表现相对于DOM树的深度而不是具有指定类选择器的元素的数量来衡量。这样可以避免为每个点击事件迭代所有可能的具有指定类选择器的元素，从而提高性能。

0