javascript - 使用 JavaScript 从 onclick 获取祖先元素的 id

标签 javascript events event-delegation

下面提供了我自己的答案

如何获取与特定元素类型关联的祖先 ID? (特别要求:使用 JavaScript 的解决方案,如果可能,不要使用 jQuery)。

现在我才刚刚开始编写代码,我的位置是:

document.onclick = clickHandler;

function clickHandler(e){
    console.log(e.target);
}

我想知道从这里到哪里可以获得我正在寻找的具体信息

我的页面上有一系列带有唯一 ID 的 ARTICLE 标记(box_1、box_2 等...)。我们的愿望是单击这些文章中的任意位置,并找出哪篇文章已被单击。这是因为我想根据单击的内容来操作特定文章的样式和属性。

我的逻辑是这样的:

记录点击。 如果点击位于框中_n 操纵

的大小/位置
<article id="box_*n*"></article>

另外,如果它有帮助的话,我完全没有必要尝试在文档级别捕获点击,但我认为无论我点击哪里,这些信息都可用。

我的答案: 基本上,这会告诉您您点击的所有内容的所有父元素,对我来说,我将其停在我的文章上并获取它们的 ID。感谢大家的意见!

function clickHandler(e){
  var boxName = e.target;
  isArticle(boxName);
}

function isArticle(boxName){
  if (boxName.tagName === "ARTICLE"){
    console.log(boxName.id);
  } else if(boxName.parentNode){
    boxName = boxName.parentNode;
    isArticle(boxName);
    console.log(boxName);
  }
}

document.onclick = clickHandler;

最佳答案

您可以在 body 元素上放置一个监听器,然后使用相关的 Event 对象来查找任何祖先文章元素,例如

<body onclick="getArticle(event)" ...>

然后是函数:

function getArticle(event) {
  var target = event.target || event.srcElement;
  var article;

  if (target) {
    article = upTo(target, 'article');
  }

  if (article) {
    // do stuff with article
  }
}

// Find first ancestor of el with tagName
// or null if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

关于javascript - 使用 JavaScript 从 onclick 获取祖先元素的 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27160590/

相关文章:

javascript - 当任何复选框值更改时启用按钮

events - socket.io - 捕获所有事件

javascript - 如何使用 jquery live 停止事件冒泡?

javascript - 如何停止在子元素上触发事件而不是添加指针事件?

javascript - addEventListener 到多个元素,使用事件委托(delegate) (JavaScript)

javascript - 将 ng-repeat Angular 限制为某些行

javascript - JSliderNews jQuery 插件通告

c# - 为什么在创建和返回新结构时出现此错误?

javascript - 事件处理程序在 js 中不起作用

javascript - 在 ReactJS 中使用搜索框时如何显示来自 API 的信息?