使用Vanilla JS在外部单击时删除元素的属性

Question

如何在外部或同一类型的另一个div上单击时删除元素的属性？ 这是我的代码：

HTML：

<div id="container">
  <div data-something></div>
  <div data-something></div>
</div>

JavaScript的：

var elements = document.querySelectorAll("[data-something]");    

Array.prototype.forEach.call(elements, function(element) {

  // Adding
  element.onclick = function() {
    this.setAttribute("data-adding", "");
  };

  // Removing -- Example
  element.onclickoutside = function() {
     this.removeAttribute("data-adding");
  };

});

Answer 1

我可能会在文档上使用单击处理程序，然后从任何不在冒泡路径中的元素中删除该属性。

document.addEventListener("click", function(e) {
    Array.prototype.forEach.call(document.querySelectorAll("*[data-adding][data-something]"), function(element) {
        var node, found = false;
        for (node = e.target; !found && node; node = node.parentNode) {
            if (node === element) {
                found = true;
            }
        }
        if (!found) {
            element.removeAttribute("data-adding");
        }
    });
}, false);

...或类似的规定。

实例：

  document.addEventListener("click", function(e) { Array.prototype.forEach.call(document.querySelectorAll("*[data-adding]"), function(element) { var node, found = false; for (node = e.target; !found && node; node = node.parentNode) { if (node === element) { found = true; } } if (!found) { element.removeAttribute("data-adding"); } }); }, false); 

 *[data-adding] { color: red; } 

 <div data-adding data-something>One</div> <div data-adding data-something>Two</div> 

Answer 2

您可以在全局单击事件处理程序中使用Node.contains()来检查单击是否在元素外部，并正确处理事件：

 box = document.getElementById('box'); lastEvent = document.getElementById('event'); box.addEventListener('click', function(event) { // click inside box // (do stuff here...) lastEvent.textContent = 'Inside'; }); window.addEventListener('click', function(event) { if (!box.contains(event.target)) { // click outside box // (do stuff here...) lastEvent.textContent = 'Outside'; } }); 

 #box { width: 200px; height: 50px; background-color: #ffaaaa; } 

 <div id="box">Click inside or outside me</div> <div>Last event: <span id="event">(none)</span> </div>