javascript - 单击监听器从 jQuery 到 Javascript

Question

我工作的网站最近发生了变化，我通过 GTM 跟踪该网站上的某些点击，并将其推送到 Google Analytics 的数据层中。

随着网站的更改，我无法再使用 jQuery，因此我必须将以下 jQuery 更改为 Javascript，但我就是无法让它工作。该脚本用于在单击 div 时收集 div 类“grid_4”内的 h3 文本。现在整个结构已经改变了，但是旧的 jQuery 看起来像这样；

<script>
var h3Tile = $("div[class*='grid_4'] a").find('h3').text(); 
$("div[class*='grid_4'] a").click(function() {
  dataLayer.push({
    'h3Value' : h3Tile, 
    'event' : 'tileClick'
  });
});
</script>

到目前为止我拥有的js是；

<script>
var outerElement = document.getElementsByClassName('ContentTeaser');
var childElems = outerElement.getElementsByTagName('h1').innerHTML;

var myFunction = function() {
  dataLayer.push({
    'h1Value' : childElems, 
    'event' : 'tileClick'
  });
};


for(var i=0;i<childElems.length;i++)
   childElems[i].addEventListener('click', myFunction(), false);

</script>

唯一的问题是 GTM 拒绝接受这一点，并表示；

“未捕获类型错误:outerElement.getElementsByTagName 不是函数”

据我所知，这与我创建一个数组而不是选择单个元素有关，但我希望我的 for 循环能够处理这个问题？还是我错了？

感谢您提供的任何帮助。

马特

Answer 1

getElementsByTagName 是 HTML 元素上的一种方法。

它和(更重要的是)getElementsByClassName 返回一个(类似数组的)HTML 集合，不是单个 HTML 元素。

您需要循环遍历 outerElement 并依次对每个元素调用 getElementsByTagName，而不是尝试在集合本身上调用它。

Which I understand is related to the fact that I am creating an array rather than selecting an individual element, but I was hoping my for loop would handle this?

您有两个个收藏。您正在循环遍历第二个元素，但尝试将第一个元素视为单个元素。

<小时/>

简单地使用查询选择器可能会更容易:

var childElems = document.querySelectorAll(".ContentTeaser h1");

<小时/>

然后你还有几个问题:

for(var i=0;i<childElems.length;i++)

由于 childElems 是 innerHTML 的值，因此它是 未定义(如果您在元素而不是 html 集合上调用它)那么它将是一个字符串)，这样就会抛出错误。

不要使用innerHTML(我已经在查询选择器示例中修复了该问题)。

childElems[i].addEventListener('click', myFunction(), false);

您正在立即调用 myFunction 并尝试将其返回值 (undefined) 指定为事件处理程序。删除 ()。